0

Мне нужно разместить блоки div в ряд, примерно 7 штук, потом еще 7 штук под ними. Но пока что хотя бы первые 7.

#content {
  margin: 10px 560px 0 300px;
  padding: 5px 20px;
  background: #EAEAEA;
  box-shadow: 0 1px 5px -2px black;
  font-family: calibri;
  text-decoration: none;
  color: #191919;
  width: 700px;
}

#portrait-block {
  background-image: url(bg.jpg);
  width: 160px;
  height: 276px;
  border: 2px solid #D1D1D1FF;
  margin: 10px 0;
}

#portrait-text {
  font-family: BigNoodleTitling;
  src: url(big-noodle.ttf);
  font-family: BigNoodleTitling, Calibri, Arial;
  font-style: italic;
  color: #E2E2E2FF;
  background-color: rgba(0, 42, 69, 0.8);
  text-align: center;
  font-size: 20pt;
  padding: 18px;
  position: relative;
  top: -97px;
}
<div id="content">
  <div id="portrait-block">
    <img src="imgs/hero-select-portrait.png" class="portrait" width="160" height="276">
    <div>
      <p id="portrait-text">DOOMFIST</p>
    </div>
  </div>
  <div id="portrait-block">
    <img src="imgs/genji.png" class="portrait" width="160" height="276">
    <div>
      <p id="portrait-text">GENJI</p>
    </div>
  </div>
</div>

Пробовал с float-ом, но тогда фоновый див уже не под этими двумя блоками.

2 ответа 2

2

.block {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1200px;
  border: 1px solid #000;
}

.block__item {
  display: flex;
  flex-basis: 110px;
  justify-content: flex-start;
  margin: 10px;
  padding: 20px;
  background: #f00;
}
<div class="block">
  <div class="block__item">1</div>
  <div class="block__item">2</div>
  <div class="block__item">3</div>
  <div class="block__item">4</div>
  <div class="block__item">5</div>
  <div class="block__item">6</div>
  <div class="block__item">7</div>
  <div class="block__item">8</div>
  <div class="block__item">9</div>
  <div class="block__item">10</div>
  <div class="block__item">11</div>
  <div class="block__item">12</div>
  <div class="block__item">13</div>
  <div class="block__item">14</div>
</div>

0

Можно например при помощи простой математики задать каждому диву ширину контейнера деленую на 7 (кол-во дивов/ряд)

.field .block{
  width: 14.28%; /* 100 / 7 */
  background: #527A62;
  float: left;
  height: 50px;
}
.field .block:nth-child(odd) {

  background:#96DEB3;
}
<div class="field">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.