Блочные элементы CSS на линии

Question

Какой самый распространенный способ иметь дело с серией блочных элементов, которые должны быть в строке (например, если javascript должен иметь возможность изменять их ширину)? Каковы плюсы и минусы применения поплавка: слева от каждого из них и использования позиционирования для их размещения?

Answer 1

Что ж, если вы не слишком озабочены старыми браузерами (я смотрю на вас, IE6), лучший способ - использовать

display:inline-block;

По сути, он создает элемент блочной модели без очистки до или после него, поэтому он остается в строке. Каждый современный браузер хорошо это понимает.

Answer 2

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

Позиционирование плюсов:

• очень точное позиционирование по отношению к следующему предку, помеченному как относительное положение - обеспечивает большую гибкость
• позволяет визуально располагать элементы в другом порядке, чем в DOM

Позиционирование минусов:

• Труднее совмещаться с другими элементами, поскольку позиционированный элемент больше не находится в потоке документов, а также из-за требуемого уровня точности.
• Другие элементы игнорируют абсолютно позиционированный элемент, что означает, что вы можете иметь потенциальное перекрытие, если только вы не учитываете минимальный и максимальный размер позиционируемого элемента
• сложнее реализовать нижний колонтитул, если вы используете абсолютное позиционирование для своих столбцов.

Плюсы:

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

Минусы поплавка:

• Множество ловушек для тех, кто менее опытен в размещении поплавков, что может привести к тому, что многие вопросы будут задаваться по SO:)

Что касается ясности: оба элемента, о которых говорил Себастьян, есть простой способ обойти это. Допустим, у вас есть контейнер div и 2 плавающих блока внутри.

Html:

<div id="con">
    <div class="float"></div>
    <div class="float"></div>
</div>

CSS:

#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }

если бы вы запустили этот код, вы бы заметили, что контейнерный div (пурпурный цвет) имеет высоту всего в один пиксель, тогда как плавающие div были правильными - это проблема, о которой говорил Себастьян. Теперь вы можете воспользоваться его советом и добавить контейнер br или float, который будет не слишком семантическим, поэтому здесь есть более элегантное решение. Просто добавьте переполнение: скрыто; в контейнер div примерно так:

#con { background:#f0f; overflow:hidden; }

Теперь ваш контейнер должен правильно обернуть плавающие элементы.

Answer 3

Я думаю, что я бы не стал явно позиционировать элементы, а скорее поручил бы браузеру использовать встроенную компоновку для элементов с использованием display: inline и позволил бы браузеру обрабатывать позиционирование.

относительно плавания и позиционирования. Я думаю, что единственный способ выстроить их с помощью позиционирования - это использовать абсолютное позиционирование, а это означает, что вам нужно обрабатывать изменения размеров (порта просмотра браузера), чтобы элементы оставались на месте.

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

Answer 4

Родительский контейнер не растягивается вместе с ними, если только ему не присвоен тег с плавающей точкой или нет br с clear: both; внизу.

Я бы пошел с поплавком: слева вместо позиционирования. Браузер выполняет все выравнивание, когда растягивается один объект. Так что вам меньше о чем беспокоиться.

Answer 5

Единственный недостаток плавания в таких ситуациях для меня заключается в том, что вам нужно либо выравнивать их по левому краю, либо выравнивать по правому краю - центрирование не вариант. Однако вы упомянули, что используете абсолютные значения для ширины, поэтому вы можете просто вложить все плавающие элементы в элемент DIV и добавить margin-right или margin-left к родительскому DIV для имитации выравнивания по центру.