Заполнение контентом

226

07 апреля 2018, 18:50

Допустим есть 9 Div-ов. Как сделать чтоб они расположились друг за другом рядами по выделенному им пространству заполняя его полностью?

Answer 1

Почитайте про flexbox

В зависимости от задачи, можно сделать что-то вроде этого

.container { 
display: flex; 
flex-wrap: wrap; 
justify-content: space-between; 
} 
 
.container__item { 
width: 30%; 
height: 200px; 
background: red; 
margin: 10px; 
}

<div class="container"> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
</div>

Answer 2

.container { 
  width: 600px; 
  height: 100px; 
  background: #333; 
  overflow: hidden; 
 
} 
.container div { 
  float: left; 
  width: 11%; 
  height: 100%; 
  border-right: 2px solid #ccc; 
}

<div class="container"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>

Answer 3

Я так понимаю вам нужно что-бы они автоматичски переносились на новую линию если нет места

.block { 
width:200px; 
height:200px; 
background:#222; 
margin:5px; 
display:inline-block; 
}

<div class="blocks"> 
  <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>