Почему bootstrap использует float на .span вместо отображения: inline-block?

Ответ 1

В терминах семантического Интернета display: inline-block следует использовать, когда мы хотим поместить элемент уровня блока, например <img> в строки (строки) текста. Мы не должны использовать встроенное размещение для создания главной страницы страниц. Элемент с display: inline-block также вступает в силу из таких свойств, как font-size и line-height родительского элемента. Это уменьшит точность макета страницы. При создании основного макета страницы вам лучше привыкнуть float вместо inline-block.

Ответ 2

Встроенные блоки учитывают пробелы, имеют автоматическую ширину фактического содержимого и суммируются в порядке, который они имеют в HTML. Плавания не требуют, но требуют метода clearfix и основаны на элементах блока. Эти элементы имеют автоматическую ширину доступного пространства по горизонтали. Чисто семантически, inline-блоки менее семантичны, так как формат с учетом пробелов и важность порядка. Но если смотреть на это чисто функционально, то и другое не предназначено для сетки. И если бы не псевдо-CSS, у нас также был бы несемантический тег HTML clearfixe. Так что, по моему мнению, они оба не победители. Но пока нет альтернативы, когда flexbox станет обязательным в ближайшие годы.

Со встроенными блоками:

<div>
    <div style="display:inline-block; width:30%;">col1
    </div><div style="display:inline-block; width:70%;">col2</div>
</div>

Метки должны быть склеены/добавлены, чтобы исключить любой желоб. Контейнер div необходим для принудительного включения элементов в отдельный ряд.

С поплавками:

<div class="clearfix">
    <div style="float:left; width:30%;">col1</div>
    <div style="float:left; width:70%;">col2</div>
</div>

Clearfix необходим для форсирования "строки" (отклонять любые проблемы с обычными элементами потока или всплывать после операций с плавающей запятой)

Использовать ли то или другое - дело вашей цели (и вкуса). Я должен сказать, что мне нравятся inline-блоки больше, чем float, если вы знаете оба значения ширины col или используете относительный размер (%). Я думаю, что это более интуитивно и предсказуемо, чем плавающие с clearfix, исправление "для проблем, которые даже не являются проблемами, если он использовался тем, как его следует использовать. Только пробел осведомленности о встроенных блоках заставляет вас использовать какой-то прикольный html Оборотная сторона

По иронии судьбы, таблицы делают все это (и даже col-heights и вертикально выравнивание) без каких-либо проблем. Поскольку встроенные блоки должны быть расположены по порядку, здесь есть мотив для обсуждения.

Если мы говорим об отзывчивости, таблица "проигрывает" inline-блоков. Допустим, у вас есть 4 колонки на рабочем столе, и вы хотите 2 колонки на планшете и 1 на мобильном телефоне. Со встроенными блоками вы "просто" задаете cols другие размеры ширины, и они, надеюсь, будут хорошо оборачиваться (помните о полях, когда они сворачиваются). С таблицами вы связаны с реальными строками, которые могут быть довольно упрямыми. Флексбокс нужен давно и выглядит красиво. Вы можете настроить гибкий макет при определенных обстоятельствах.

Bootstrap может пригодиться, чтобы узнать, как они что-то сделали. Просто прочитайте в 3.0, они используют относительный размер сетки. Что дает проблему с вложенными сетками и выравниванием.

----  --a-  ----  ----
---b------
....  ..c.

Col a нормальный родительский col. Col c - вложенное в ребенка col of b. Трудно совместить c с относительным размером, так как желоб зависит от контейнера, если вы не используете модель заполнения и рамки. Но таким образом вы теряете большую гибкость. Когда вы хотите, чтобы у col было немного фона и отступов, вы запутали систему сетки, поэтому вы должны использовать контейнер, который вы стилизуете, что бы загромождало код. Я не изучал, нашли ли они решение для этого. Я еще не Я остановился на фиксированных пикселях, но это означает, что в адаптивном дизайне вы можете иметь только несколько фиксированных значений ширины, а для всего, что связано с мобильными устройствами, использовать относительную сетку.

Ответ 3

Я предпочитаю сетчатые системы, которые используют display: inline-block;, а не float, например Pure ( ранее Yahoo YUI Grid), потому что они интернационализируются без дополнительных стилей; изменить направление текста вправо-влево, и макет автоматически меняет направление; Поплавки этого не делают. Поплавки также приводят к необходимости очистки и других странностей с перекрестным браузером. Любые неточности, которые inline-block могут иметь более float, могут быть устранены, как показывает Pure. Что касается критики, что display: inline-block; не предназначен для использования в макете, возможно, использование display: table; также должно быть запрещено для центрирования кросс-браузера. Я бы также поставил вопрос, действительно ли термин Semantic Web применяется к CSS, поскольку этот термин в первую очередь касается HTML и использования его элементов и атрибутов для передачи машиносчитываемого значения; вся точка CSS заключается в том, чтобы стилизовать семантический HTML так же радикально, как хотелось бы, отсюда классические сайты, такие как CSS Zen Garden.

Я говорю, что пока техника не использует ошибку, не препятствует контенту пользователям и устройствам и достаточно поддерживается, тогда это приемлемо. Нет причин, по которым нельзя использовать CSS в неортодоксальных, но поддерживаемых, так же, как и CSSPlay от Stu Nicholls.

Интересно, что Flexible Box также встроен в чистые сетки, превосходную систему макетов, совместимую с современными браузерами (≥IE10 и эквивалентные браузеры).