Как разместить блоки друг под другом css

Как расположить 2 inline-block друг под другом без костылей?

Есть 2 inline-block , их нужно поместить друг под другом. Есть ли способ без костылей и не правя ‘html’ это сделать? з.ы. в изначальном коде в инлайн блоках содержатся динамические элементы, поэтому нельзя применять ширину 100%

У вас в принципе подход не правильный, вам нужно либо добавить врапперы, либо хотя бы <br /> добавить.

Добавить обертку:

Добавить перенос:

Либо через псевдоэлементы, но только для display: inline; :

Еще вариант через white-space: pre; для родителя, но тогда будут учитываться все проблемы и переносы в разметке:

Вариант, который вижу я:

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css inline blocks или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как разместить слитно два изображения друг под другом?

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

Решение

Расположение изображений друг под другом часто продиктовано требованиями дизайна, когда необходимо «склеить» без швов несколько изображений в одну цельную картину. Обычно для переноса текста, а также изображений на другую строку применяется тег <br> или контейнер фиксированного размера, но в том и другом случае существуют свои особенности.

Для начала рассмотрим способ применения тега <br> , который отвечает за создание переноса. Этот тег достаточно добавить сразу же после первого тега <img> , как показано в примере 1. Здесь, однако, кроется одна хитрость. При строгом режиме браузера (в HTML5 или при строгом <!DOCTYPE> в HTML4 или XHTML) между изображений возникает пустой промежуток, убрать который поможет свойство line-height , его следует указать для контейнера, в котором хранятся изображения, обычно это тег <p> или <div> .

Пример 1. Использование тега <br>

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1. Изображения располагаются внутри контейнера <p> и разделяются тегом <br> . Для состыковки изображений без пробелов в стилях указывается свойство line-height со значением 1px. Те же рисунки без состыковки показаны на рис. 2.

Два изображения, состыкованные по вертикали

Рис. 1. Два изображения, состыкованные по вертикали

Промежуток между изображениями

Рис. 2. Промежуток между изображениями

Кроме использования межстрочного расстояния, существуют и другие методы убрать промежуток между рисунками, например, использовать свойство vertical-align .

Можно обойтись и без тега <br> , поместив изображения в блок фиксированной ширины, значение которой совпадает с шириной рисунков. Перенос изображений друг под друга произойдет автоматически (пример 2).

Пример 2. Фиксированная ширина

HTML5 CSS 2.1 IE Cr Op Sa Fx

В браузере Internet Explorer 6 и 7 в результате выполнения данного примера возможно появление промежутка между изображениями. Известная ошибка этого браузера решается просто. Достаточно теги <img> в коде примера записать в одну строку без пробелов и переносов.

Запретить перенос блоков друг под друга, когда им присвоено свойсто float.

Имеем три блока div, которым присвоено свойство float со значением left.

Эти блоки обтекают друг друга и выстраиваются в одну линию.

01-05-2013 15-02-04

Но, если теперь начинать сужать окно браузера, то один блок переносится под другой, когда ему не хватает места в окне. Поэтому такие элементы (со свойством float) называют плавающими.

01-05-2013 15-02-23

Но, что делать, если мы не хотим, чтобы эти блоки смещались друг под друга?

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Решение здесь довольно простое. Нужно переназначить родителя для этих блоков и назначить ему фиксированную ширину.

По умолчанию, родителем для них является элемент body с шириной width:auto. Когда мы изменяли ширину окна браузера, изменялась и ширина элемента body.

Float работает следующим образом: если элементу с float не хватает места в родительском элементе, он переносится на новую строку. Это у нас и происходило.

Стоит только добавить новый родительский элемент с фиксированной шириной, как все встает на свои места:

Теперь, сколько бы мы не изменяли ширину окна браузера, блоки с float будут находиться на одной линии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *