Страницы

Поиск по вопросам

понедельник, 9 декабря 2019 г.

div элементы в одну строку

#html #css


Как расположить div элементы в одну строку?
.div1 { display: inline; }

Картинки выстраиваются в ряд. Но как быть, если например, под картиной нужно сделать описание? .div1 { display: inline; }
image1
image2
image3
То элементы div1 снова начинаются с новой строки. как быть?


Ответы

Ответ 1



Просто .div1 {display:inline-block;} А вот так можно уменьшить количество кода: .about { display:inline-block; } .about img { display:block; }
image1
image2
image3


Ответ 2



Используй display: inline-block или float: left на селектор .div1 Подробнее про выравнивание элементов.

Ответ 3



Я советую использовать flex, вот пример кода: HTML file:
CSS file: .container{ display: flex; flex-direction: row; justify-content: flex-start; border: 5px solid black; padding: 20px; } #con1{ width: 150px; border: 2px solid black; background-color: green; height: 150px; border-right: 0px; } #con2{ width: 100%; border: 2px solid black; background-color: yellow; height: 300px; } #con3{ width: 150px; border: 2px solid black; border-left: 0px; background-color: green; height: 150px; } Советую почитать

Ответ 4



Все дело в том, что внутри - блочный элемент. Попробуйте так:
123
123
123
SPAN - inline элемент, но DIV - блочный. Результат - все в столбик. Уберите везде DIV - получите результат в строку. Для того, чтобы получить то, что хотите - можно указать не display: inline, а display: inline-block, либо делать через таблицы (не в тегах, а в стилях - например, display: table)

Комментариев нет:

Отправить комментарий