Как сделать блоки горизонтальными?

Question

Подскажите пожалуйста, как сделать расстановку блоков горизонтальной? Пока только учусь, код пишу по образцу, не совсем понимаю взаимосвязь параметров. В оригинале был один блок посередине, переделала под несколько блоков

<pre><code>
<div class="wrapper">
     <div class="card">
           <div class="acos-container-front">
                <span>ACOS</span>
           </div>
           <div class="acos-container-back"> 
                <h4 class="function-name">acos</h4>
                <h6 class="function-parameters">Параметры</h6>
                <p class="function-info">х – должно быть числовым значением в диапазоне от -1 до 1. Если х больше 1, то функция будет генерировать «math domain error».</p> 
                <h6 class="function-parameters">Возвращаемое значение</h6> 
                <p class="function-info">Эта функция возвращает арккосинус х, в радианах.</p> 
           </div>
     </div>

<pre><code>.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #aed5df;
  display: inline-flex;
  float: left;
  justify-content: normal;
  align-items: center;
  border-radius: 7px;
  vertical-align: top;
}
.card {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid #fff;
  border-radius: 10px;
  margin: 10px;
}
.acos-container-back,
.acosh-container-back,
.asin-container-back,
.asinh-container-back,
.atan-container-back {
  position: relative;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: 1s;

  left: 0;
  top: 0;
}
.acos-container-front,
.acosh-container-front,
.asin-container-front,
.asinh-container-front,
.atan-container-front {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  background-color: rgb(173, 140, 140);
  border-radius: 10px;
}
.acos-container-back,
.acosh-container-back,
.asin-container-back,
.asinh-container-back,
.atan-container-back {
  transform: rotateY(180deg);
}
.card:hover .acos-container-front,
.card:hover .acosh-container-front,
.card:hover .asin-container-front,
.card:hover .asinh-container-front,
.card:hover .atan-container-front {
  transform: rotateY(180deg);
}
.card:hover .acos-container-back,
.card:hover .acosh-container-back,
.card:hover .asin-container-back,
.card:hover .asinh-container-back,
.card:hover .atan-container-back {
  transform: rotateY(360deg);
}

.acos-container-back,
.acosh-container-back,
.asin-container-back,
.asinh-container-back,
.atan-container-back {
  background-color: rgb(178, 178, 224);
  margin: 10px 11px 10px 10px; 
  font-size: 11px;
  padding: 10px 10px 10px 0;
  height: 260px;
  width: 270px;
  border-radius: 10px; 
  position: relative; 
} </code><\pre>

Answer 1

Не буду весь Ваш код переписывать т.к он не относится к цели задачи. Для начала, уберем float: left. Используйте flex-box, это удобнее. Так же, вы указали display: flex не для родительского блока.

HTML:

<div id="container"> <!-- Это родительский блок, его надо сделать flex -->
   <div class="item">text</div>
   <div class="item">text</div>
   <div class="item">text</div>
   <div class="item">text</div>
   <div class="item">text</div>
</div>

CSS:

#container {
   display: flex; /* Теперь все <div> которые находятся внутри #container будут flex*/

   flex-direction: row; /* Определяем направление блоков */

   justify-content:space-around; /* Равномерно распределяет все элементы по ширине flex-блока. 
                                    Все элементы имеют полноразмерное пространство 
                                    с обоих концов */
}

.item {
   width: 150px;
   height: 150px;
   border: 1px solid black;
}

БЛОГ НА HUSL

Как сделать блоки горизонтальными?

Ответы (1 шт):