CSS: элементы в строку
Верстка
По умолчанию все блочные элементы в HTML выстраиваются в ряд друг под другом и занимают всю ширину страницы. И тут же у новичков возникает вопрос как расположить, с помощью CSS элементы в строку. Существует 2 наиболее популярных способа это сделать.
- Использовать display: inline-block
- Использовать float: left/right
Рассмотрим каждый из них.
CSS свойство display: inline-block
Данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. Важно понимать как работает это свойство, поэтому давайте рассмотрим на практике. Сделаем 3 блока внутри родительского и расположим их в одну линию. Вот что получилось:
HTML разметка выглядит следующим образом:
Как видно на изображении я добавил свойства background и border, чтоб наглядно видеть происходящее на странице. Обязательно задаем всем элементам height иначе оно будет равно 0 по умолчанию и мы ни чего не увидим. Трем блокам .child задаем display: inline-block и width: 30%.
ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку.
Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством. Если попробуем изменить класс для блока .child находящегося по середине, тем самым убрав все стили, то увидим что все элементы выстроились в ряд.
CSS свойство float: left или float: right
Аналогичное по результату inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Давайте попробуем убрать из предыдущего примера
CSS align images and text on same line
I have been searching and trying different methods for hours now. I just can’t seem to get these two images and text all on one line. I want both the images and both text to all be on one line arranged image, text, image, text My images are coded like this with simple styles attacted
My «liketext» class is just has a simple text color modifier. With this code the first image and text are on the same line, and the the next image and text is on the line below. I want all four objects to be on the same line. I really have tried to solve this question on my own and appreciate any help given and hopefully this post can help others as well thank you!
Как сделать, чтобы картинки были на одной линии?
Как сделать, чтобы картинки были на одной линии? У меня вот такая фигня: 
Нужно, чтобы картинки были прижаты друг к другу, в то время как 1 и 3 картинка были прижаты к краям экрана. У меня на данный момент такой код:
.img1 <
width: 33%;
float: left;
display: inline-block;
margin: 0;
padding: 0;
>
Убрал все <> в редакторе, т.к. не показывает код.
- Вопрос задан более трёх лет назад
- 3294 просмотра
- Вконтакте
Использовать flex. Стили такие:
Зачем каждому изображению давать свой класс и писать одно и то же я честно чет не понял. есть ведь селектор по тегу и всё с ним хорошо. Ширину при желании можно сделать меньше. Но не забывайте, что flex может сплющить ваши картинки и придется писать у них и нужную высоту (у каждой, либо вырезать все одной высоты и всем задать одну и ту же).
- Вконтакте
Если используется inline-block, то в html надо в одну строку расположить их, иначе образуется между ними расстояние.
Можно вместо inline-block использовать float: left и потом в блоке сбрасывать clear: both;
Флексы лучше не использовать, т.к. еще очень многие браузеры не поддерживают его.
Если стили у них одинаковые, зачем разные классы использовать? Или можно все классы через запятую перечислить.
Изображение и ссылка в одну линию.
130x130px) и ссылка. надо из расположить в линию, как на рисунке:
Пока удается добиться такого только при помощи таблицы.
При помощи css получается вот так:
То есть ссылка «прилипает» к нижнему краю изображения.
Как сделать это при помощи css?
Ссылка на комментарий
Поделиться на других сайтах
3 ответа на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.