#html #css
Как расположить div элементы в одну строку? .div1 { display: inline; }Картинки выстраиваются в ряд. Но как быть, если например, под картиной нужно сделать описание? .div1 { display: inline; }image1image2То элементы div1 снова начинаются с новой строки. как быть?image3
Ответы
Ответ 1
Просто .div1 {display:inline-block;} А вот так можно уменьшить количество кода: .about { display:inline-block; } .about img { display:block; }image1image2image3Ответ 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
Все дело в том, что внутри - блочный элемент. Попробуйте так:123123123SPAN - inline элемент, но DIV - блочный. Результат - все в столбик. Уберите везде DIV - получите результат в строку. Для того, чтобы получить то, что хотите - можно указать не display: inline, а display: inline-block, либо делать через таблицы (не в тегах, а в стилях - например, display: table)
Комментариев нет:
Отправить комментарий