Многие задавались вопросом или видели его в сети интернет, это как можно сделать равномерное расположение блоков div, которые были в горизонтальном виде. Также, чтоб был автоматический перенос на вторую и последующее строку. Но для этого с начало нужно создать и выстроить блоки div в одну строку, что и будем в этом материале делать.
И сделаем так, что при масштабировании окна или сжатие, то блоки переносятся на следующее строку. Иногда нам нужно поместить изображение в один ряд, вот как раз такие блоки помогут осуществить задуманное.
Здесь не чего сложного нет, что изначально воспользуемся свойством float, который отвечает за выравнивание. Случается так, что один блок может просто наехать на следующий, для этого зададим им обтекание, где подключаем свойство clear.
Приступаем к установке, что сразу всем блокам задаем параметр float:left - из по умолчанию идут 5 блоков.
HTML
Код
<div style="width:100%; height:1px; clear:both;"></div>
<div id="vesaasm-udogavun">Первый</div>
<div id="vesaasm-udogavun">Второй</div>
<div id="vesaasm-udogavun">Третий</div>
<div id="vesaasm-udogavun">Четвертый</div>
<div id="vesaasm-udogavun">Пятый</div>
<div style="width:100%; height:1px; clear:both;"></div>
CSS
Код
#vesaasm-udogavun {
width: 123px;
height: 64px;
background: #c7c2c2;
float: left;
margin: 0 20px 20px 0;
text-align: center;
padding: 8px;
border: 2px solid #867d7d;
}
Для того, чтобы выставить 2 блока в один ряд, то здесь уже нужно float для них задать, а также left для одного и right для другого, чтоб все корректно смотрелось.
Демонстрация
