CSS: элементы в строку
По умолчанию все блочные элементы в HTML выстраиваются в ряд друг под другом и занимают всю ширину страницы. И тут же у новичков возникает вопрос как расположить, с помощью CSS элементы в строку. Существует 2 наиболее популярных способа это сделать.
- Использовать display: inline-block
- Использовать float: left/right
Рассмотрим каждый из них.
CSS свойство display: inline-block
Данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. Важно понимать как работает это свойство, поэтому давайте рассмотрим на практике. Сделаем 3 блока внутри родительского и расположим их в одну линию. Вот что у меня получилось:
HTML разметка выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> |
CSS стили:
1 2 3 4 5 6 7 8 9 10 11 12 |
.parent { border: 1px solid black; height: 200px; } .child { height: 100px; display: inline-block; background: red; width: 30%; } |
Как видно на изображении я добавил свойства background и border, чтоб наглядно видеть происходящее на странице. Обязательно задаем всем элементам height иначе оно будет равно 0 по умолчанию и мы ни чего не увидим. Трем блокам .child задаем display: inline-block и width: 30%. ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством. Если попробуем изменить класс для блока .child находящегося по середине, тем самым убрав все стили, то увидим что все элементы выстроились в ряд.
CSS свойство float: left или float: right
Аналогичное по результату inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Давайте попробуем убрать из предыдущего примера
1 |
display: inline-block; |
и добавим вместо него
1 |
float: left; |
Результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа <p> с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-left .
Можно флексбоксами ещё.
а как флексами так выровнять?
родительскому блоку указать
.parent {
display: flex;
flex-direction: row;
justify-content: center; //выравнивание по центру
}
Спасибо, добрый человек!
Попробовал я кстати inline-block, но все элементы(строки/ссылки) в первом div скатились в самый низ. Может быть из-за того, что высота второго div — больше ? А вот float:left — самое то.
Да, неплохо.
В краткой форме ответ дан тут:
http://hellohtml.ru/how/html-css/365/
Спасибо за объяснение, все просто и понятно!
Ребята, как убрать маленькое пространство между div’ами при использовании inline-block?
Эдик, наверное единственный способ это убрать отступы в самом коде так, чтобы все элементы шли друг за другом вплотную.
У меня ничего не работает!!! помогите пж!!!
у нас тоже не работает, не парся
у нас не работает тоже
а как еще без флексов можно верстать блочную модель?
Смысл у вас учиться верстать, если вы свой сайт не сумели сделать? Часть текста за экраном, его не видно.
Спасибо за замечание, исправили