it-swarm.com.ru

Преимущества использования display: inline-block против float: left в CSS

Обычно, когда мы хотим иметь несколько DIVs подряд, мы будем использовать float: left, но теперь я обнаружил хитрость display:inline-block

Пример ссылки здесь . Мне кажется, что display:inline-block является лучшим способом для alignDIVs подряд, но есть ли недостатки? Почему этот подход менее популярен, чем трюк float?

113
Ryan

В 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 не подходит для макета вашей страницы, заключается в том, что свойство CSS floatизначально предназначалось только для обтекания текста вокруг изображения (стиль журнала) и по своему дизайну не лучше всего подходит для общего макета страницы. При последующем изменении плавающих элементов иногда возникают проблемы с позиционированием, поскольку они не входят в поток страниц . Другим недостатком является то, что обычно требуется четкое исправление, иначе это может нарушить некоторые аспекты страницы. Clearfix требует добавления элемента после всплывающих элементов, чтобы остановить их родительский элемент разрушается вокруг них, что пересекает семантическую границу между отделением стиля от содержимого и, следовательно, анти-шаблон в веб-разработке .

Любые проблемы с пробелами, упомянутые в приведенной выше ссылке, можно легко исправить с помощью свойства CSS white-space.

Правка:

SitePoint - очень заслуживающий доверия источник рекомендаций по веб-дизайну, и они, похоже, придерживаются того же мнения, что и я:

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

Не обманывайтесь. Тебе промывают мозги.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Обновление 2015 - Flexbox является хорошей альтернативой для современные браузеры:

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Подробнее

21 декабря 2016 г. Обновление

Bootstrap 4 убирает поддержку IE9 и, таким образом, избавляется от поплавков из строк и полностью загружает Flexbox.

Запрос на извлечение № 21389

146
Alex W

Хотя я согласен с тем, что в общем случае inline-block лучше, есть еще одна вещь, которую необходимо учитывать , если вы используете процентную ширину для создания адаптивной сетки (или если вы хотите ширину, идеальную для пикселей):

Если вы используете inline-block для сеток, ширина которых составляет 100% или около 100%, вам нужно убедиться, что ваша HTML-разметка не содержит пробелов между столбцами .

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

Если по какой-либо причине вы не можете контролировать разметку HTML (например, ограничительную CMS), вы можете попробовать описанные здесь приемы или вам может потребоваться компромисс и использование плавающих элементов вместо встроенного блока. Существуют также уродливые приемы CSS, которые следует использовать только в экстремальных ситуациях, например font-size:0; в контейнере столбца, затем повторно примените размер шрифта в каждом столбце .

Например:

22
user568458

Если вы хотите выровнять div с точностью до пикселя, используйте float. inline-block, кажется, всегда требует от вас отрубить несколько пикселей (по крайней мере, в IE)

4
Vins

Вы можете найти ответ в глубине здесь .

Но в целом с float вам нужно знать и заботиться об окружающих элементах и ​​inline-block о простом способе выравнивания элементов.

Спасибо

1
abhijit

Есть одна особенность inline-block, которая может быть не прямой. То есть значением по умолчанию для вертикального выравнивания в CSS является базовая линия. Это может вызвать неожиданное поведение выравнивания. Посмотрите на эту статью.

http://www.brunildo.org/test/inline-block.html

Вместо этого, когда вы делаете float: left, элементы div не зависят друг от друга, и вы можете легко выровнять их, используя margin.

1
Sydney