Обычно, когда мы хотим иметь несколько DIVs в строке, мы будем использовать float: left, но теперь я обнаружил трюк display:inline-block
Пример ссылки здесь.
Мне кажется, что display:inline-block является лучшим способом для align DIVs в строке, но есть ли недостатки? Почему этот подход менее популярен, чем трюк float?
В 3 словах: inline-block лучше.
Встроенный блок
Единственным недостатком подхода display: inline-block является то, что в IE7 и ниже элемент может отображаться только inline-block, если он уже был inline по умолчанию. Это означает, что вместо использования элемента <div> вы должны использовать элемент <span>. Это не очень большой недостаток, потому что семантически <div> предназначен для деления страницы, а <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 не подходит для компоновки вашей страницы, заключается в том, что свойство float CSS изначально предназначалось только для текста обернуть изображение (стиль журнала) и, по своему усмотрению, не подходит для общих целей макета страницы. При смене плавающих элементов позже иногда возникают проблемы с позиционированием, потому что они не входят в поток страниц. Другим недостатком является то, что обычно требуется clearfix, иначе он может нарушить аспекты страницы. Для clearfix требуется добавить элемент после плавающих элементов, чтобы остановить их родительский элемент вокруг них, который пересекает семантическую линию между разделяющим стилем из содержимого и, таким образом, анти-шаблон в веб-разработке.
Любые проблемы с пробелом, упомянутые в ссылке выше, могут быть легко исправлены с помощью свойства white-space CSS.
SitePoint является очень надежным источником для консультаций по веб-дизайну, и у них, похоже, есть то же мнение, что и я:
Если вы новичок в CSS-макетах, вы будете прощены за то, что думаете, что использование CSS-плит в воображаемом виде - это высота мастерства. если ты израсходовали столько уроков CSS-макетов, сколько вы можете найти, вы можете предположим, что освоение поплавков - обряд посвящения. Вы будете ослеплены по изобретательности, пораженной сложностью, и вы получите смысл достижения, когда вы, наконец, понимаете, как работают поплавки.
Не обманывайте себя. Тебе промывают мозги.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015 Update - Flexbox - хорошая альтернатива современным браузерам:
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
21 декабря 2016 г. Обновление
Bootstrap 4 удаляет поддержку IE9 и, таким образом, избавляется от поплавков из строк и переполняется Flexbox.
Хотя я согласен с тем, что в целом inline-block лучше, есть еще одна вещь, чтобы принять во внимание , если вы используете процентную ширину, чтобы создать чувствительную сетку (или если вы хотите, чтобы пиксель был идеальным ширина):
Если вы используете inline-block для сеток, которые составляют 100% или почти 100% ширины, вам нужно убедиться, что ваша разметка HTML содержит пробела между столбцами.
С поплавками это не то, о чем вам нужно беспокоиться - столбцы плавают по любому пробелу или другому контенту между столбцами. В ответах на этот вопрос есть несколько полезных советов о способах удаления HTML-пробелов, не делая ваш код уродливым.
Если по какой-либо причине вы не можете контролировать разметку HTML (например, ограничительную CMS), вы можете попробовать трюки, описанные здесь, или вам может потребоваться скомпрометировать и использовать float вместо встроенного блока. Существуют также уродливые трюки CSS, которые следует использовать только в экстремальных обстоятельствах, например font-size:0; в контейнере столбца, а затем повторно использовать размер шрифта в каждом столбце.
Например:
float: left. Он "просто работает" (но для обертки, подлежащей очистке).inline-block. Пробел между блоками создает пространство с фиксированной шириной, которое подталкивает общую ширину выше 100%, разбивая макет и вызывая падение столбца последней строки.inline-block и без пробелов между столбцами в HTML. Он "просто работает" снова, но HTML является более уродливым, и ваша CMS может вызывать какую-то предикат или отступы к его HTML-выходному, что делает это трудным для достижения на самом деле.Если вы хотите выровнять div с точностью до пикселя, используйте float. inline-block Кажется, что вам всегда нужно отрубать несколько пикселей (по крайней мере, в IE)
Подробный ответ можно найти здесь.
Но в целом с float вам нужно знать и заботиться о окружающих элементах и inline-block простой способ линейных элементов.
Спасибо
Есть одна характеристика встроенного блока, которая может быть не прямой. То есть значение по умолчанию для вертикального выравнивания в CSS является базовым. Это может привести к неожиданному выравниванию. Посмотрите на эту статью.
http://www.brunildo.org/test/inline-block.html
Вместо этого, когда вы выполняете float: left, divs независимы друг от друга, и вы можете легко их выравнивать с помощью поля.