Обычно, когда мы хотим иметь несколько DIVs
строк подряд, мы бы использовали float: left
, но теперь я обнаружил уловкуdisplay:inline-block
Ссылка на пример здесь . Мне кажется, что display:inline-block
это лучший способ align
DIVs
подряд, но есть ли недостатки? Почему этот подход менее популярен, чем float
трюк?
inline
, а не оinline-block
. Но первый из них хорош: stackoverflow.com/a/11823622/918414Ответы:
В 3-х словах:
inline-block
лучше.Встроенный блок
Единственным недостатком этого
display: inline-block
подхода является то, что в IE7 и ниже элемент может отображаться только в томinline-block
случае, если он уже был установленinline
по умолчанию. Это означает, что вместо использования<div>
элемента вы должны использовать<span>
элемент. На самом деле это не большой недостаток, потому что семантически a<div>
предназначен для разделения страницы, а a<span>
предназначен только для покрытия диапазона страницы, поэтому большой семантической разницы нет. Огромным преимуществомdisplay:inline-block
является то, что когда другие разработчики поддерживают ваш код на более позднем этапе, гораздо более очевидно, чтоdisplay:inline-block
и что ониtext-align:right
пытаются выполнить, чем операторfloat:left
илиfloat:right
. Моя любимая польза отinline-block
подхода заключается в том, что он прост в использованииvertical-align: middle
,line-height
иtext-align: center
для идеального центрирования элементов интуитивно понятным способом. В блоге Mozilla я нашел отличную запись о том, как реализовать кроссбраузерный встроенный блок . Вот совместимость браузера .терка
Причина, по которой использование этого
float
метода не подходит для макета вашей страницы, заключается в том, чтоfloat
свойство CSS изначально предназначалось только для обтекания текстом изображения (стиль журнала) и по дизайну не лучше всего подходит для общих целей макета страницы. При последующем изменении перемещаемых элементов иногда возникают проблемы с позиционированием, потому что они не находятся в потоке страницы . Другой недостаток заключается в том, что для этого обычно требуется clearfix, иначе это может нарушить некоторые аспекты страницы. Clearfix требует добавления элемента после плавающих элементов, чтобы их родительский элемент не сжимался вокруг них, что пересекает семантическую грань между разделением стиля и контента и, таким образом, является анти-шаблоном в веб-разработке .Любые проблемы с пробелами, упомянутые в приведенной выше ссылке, можно легко исправить с
white-space
помощью свойства CSS.Редактировать:
SitePoint - очень надежный источник советов по веб-дизайну, и они, похоже, придерживаются того же мнения, что и я:
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
Обновление 2015 г. - Flexbox - хорошая альтернатива для современных браузеров :
Больше информации
Обновление от 21 декабря 2016 г.
Bootstrap 4 удаляет поддержку IE9 и, таким образом, избавляется от поплавков в строках и превращается в полный Flexbox.
Запрос на вытягивание # 21389
источник
white-space
недвижимость - не могли бы вы это объяснить?letter-spacing
где-нибудь в моем CSS.Хотя я согласен с тем, что в целом
inline-block
лучше, есть одна дополнительная вещь, которую следует учитывать, если вы используете процентную ширину для создания адаптивной сетки (или если вам нужна идеальная ширина до пикселей):Если вы используете
inline-block
сетки, общая ширина которых составляет 100% или почти 100%, вам необходимо убедиться, что ваша разметка HTML не содержит пробелов между столбцами .С float вам не о чем беспокоиться - столбцы плавают над любым пробелом или другим содержимым между столбцами. В ответах на этот вопрос есть несколько хороших советов о том, как удалить пробелы HTML, не делая ваш код некрасивым .
Если по какой-либо причине вы не можете контролировать разметку HTML (например, ограничивающая CMS), вы можете попробовать описанные здесь приемы или вам, возможно, придется пойти на компромисс и использовать float вместо inline-block. Есть также уродливые приемы CSS, которые следует использовать только в крайних случаях, например,
font-size:0;
в контейнере столбца, а затем повторно применить размер шрифта в каждом столбце .Например:
float: left
. Он «просто работает» (но для оболочки нужно очистить).inline-block
. Пробелы между блоками создают пространство фиксированной ширины, которое выталкивает общую ширину за пределы 100%, нарушая макет и заставляя последний столбец выпадать на строку.inline-block
без пробелов между столбцами в HTML . Он снова «просто работает», но HTML уродливее, и ваша CMS может вызвать какие-то предварительные настройки или отступы для своего HTML-вывода, что затруднит это в реальности.источник
div+(whitespace) {display:none}
или что-то в этом роде?<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here...
?)Если вы хотите выровнять
div
с точностью до пикселя, используйте float.inline-block
кажется, всегда требует от вас отрубить несколько пикселей (по крайней мере, в IE)источник
* {padding:0px; margin:0px; }
как это помогает сбалансировать мое кодированиеВы можете найти подробный ответ здесь .
Но в целом при этом
float
нужно знать и заботиться об окружающих элементах иinline-block
простом способе выровнять элементы.Спасибо
источник
У встроенного блока есть одна особенность, которая может быть непростой. То есть значение по умолчанию для вертикального выравнивания в CSS - baseline. Это может вызвать неожиданное поведение при выравнивании. Посмотрите эту статью.
http://www.brunildo.org/test/inline-block.html
Вместо этого, когда вы выполняете float: left, блоки div не зависят друг от друга, и вы можете легко выровнять их с помощью поля.
источник