Блоки в один ряд с помощью CSS

Количество просмотров: 309

Всем привет. В данной статье рассмотрим как сделать, чтобы несколько hmtl элементов размещались в одну строку, так, как сделано чуть ниже по тексту. Для решения этой очень популярной задачи будем использовать разные css свойства:

  1. inline-block - из блочного в блочно - строчный
  2. foat - обтекай
  3. flex - зафлексим это

В качестве основы возьмем следующую разметку. Элемент родитель div с классом row и 4 дочерних div элемента.

Если вам лень читать, то можете применить display:flex; к родительскому контейнеру и его прямые потомки выстроятся в линию без переноса элементов.


<div class="row">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

1
все
2
три
3
в ряд
4
а я четвертый!

Inline-block для элементов.

Элементам с классом item пропишем свойство display:inline-block, тем самым превратим их из блочных в блочно-строчные. Посмотрим, что у нас получится.


.item {
    display:inline-block;
}

1
1
2
чуть больше
3
больше чем два
4
а я четвертый! чуть больше текста.

Как видно из примера, элементы выстроились в линию, но у каждого из них разная ширина, т.к. она в данном случае зависит от содержания самих элементов. Зададим данным div'ам еще и ширину в процентах.


.item {
    display:inline-block;
    width:20%;
}

1
один
2
чуть больше
3
больше чем два
4
а я четвертый! чуть больше текста.

Теперь у нас проблема с высотой, четвертый элемент явно больше чем его соседи, но и контента в нем больше. Давайте вместо ширины, укажем минимальную ширину для элементов.


.item {
    display:inline-block;
    min-width:20%;
}

1
один
2
чуть больше
3
больше чем два
4
вот так гораздо лучше.

Float:left и clearfix

Float изначально задумывался как свойство включающее обтекание у элементов, попробуем для наших элементов задать float:left;


.item {
    float:left;//прижимает элемент к левому краю, 
               //другие элементы обтекают его справа;
}

1
один
2
чуть больше
3
больше чем два
4
вот так гораздо лучше.

Какой-то текст, после наших блоков

Как мы видим не все прошло гладко, элементы слиплись, а текст следующий после них, стал обтекать последний div. Немного подправим наш каркас, добавив элемент распорку с классом clearfix, и зададим отступы для элементов.


<div class="row">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
<div class="clearfix"></div>
</div>



.item {
    float:left;//прижимает элемент к левому краю, 
               //другие элементы обтекают его справа;
    margin:5px;
}
.clearfix {
   clear:both; //запрещаем обтекание со всех сторон;
}

1
один
2
чуть больше
3
больше чем два
4
вот так гораздо лучше.

Великий и самый крутой display:flex;

Вот мы и добрались до самого интересного, давайте попробуем задать свойство display:flex; контейнеру с классом row и посмотрим как поведут себя элементы внутри него.


<div class="row">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>



.row {
    display:flex;
}
.item {
margin:5px;
}

1
один
2
чуть больше
3
больше чем два
4
вот так гораздо лучше.

Теперь div.row флекс контейнер, а потомки.item внутри него - флекс элементы расположенные вдоль главной оси. Вот так просто. Во всех рассмотренных примерах мы сделали так, чтобы блочные элементы встали в один ряд и пример с флексом самый простой. Более того, каждый из трех примеров содержит большое количество ньюансов не рассмотренных нами. Возможно, в дальнейшем мы расскажем о них, но не сегодня. До новых встреч!



© 2015-2019 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх