Плыть налево; vs display: inline; vs display: встроенный блок; vs display: table-cell;

Ответ 1

Из параметров, о которых вы спрашивали:

• float:left;
  Мне не нравятся поплавки из-за необходимости иметь дополнительную разметку, чтобы очистить float. Насколько мне известно, вся концепция float была плохо разработана в спецификациях CSS. Но теперь мы ничего не можем с этим поделать. Но важно то, что он работает, и он работает во всех браузерах (даже IE6/7), поэтому используйте его, если вам это нравится.

Дополнительная разметка для очистки может не понадобиться, если вы используете селектор :after, чтобы очистить поплавки, но это не вариант, если вы хотите поддерживать IE6 или IE7.

• display:inline;
  Это не должно использоваться для макета, за исключением IE6/7, где display:inline; zoom:1 - это откат для сломанной поддержки inline-block.

• display:inline-block;
  Это мой любимый вариант. Он работает хорошо и последовательно во всех браузерах с предостережением для IE6/7, которые поддерживают его для некоторых элементов. Но см. Выше, для хакерского решения, чтобы обойти это.

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

• display:table-cell;
  Другой, где у вас будут проблемы с совместимостью с браузером. Старые IE не будут работать с этим вообще. Но даже для других браузеров стоит отметить, что table-cell предназначен для использования в контексте нахождения внутри элементов, обозначенных как table и table-row; использование table-cell изолированно не предназначено для этого, поэтому вы можете столкнуться с разными браузерами, которые рассматривают это по-другому.

Другие методы, которые вы, возможно, пропустили? Да.

• Поскольку вы говорите, что это для многоколоночного макета, есть функция CSS Столбцы, о которой вы, возможно, захотите узнать. Однако это не самая хорошо поддерживаемая функция (не поддерживаемая IE даже в IE9 и префикс поставщика, требуемый всеми другими браузерами), поэтому вы не можете его использовать. Но это еще один вариант, и вы спросили.

• Также есть функция CSS FlexBox, которая предназначена для того, чтобы вы могли передавать текст из окна в поле. Это захватывающая функция, которая позволит создавать сложные макеты, но это все еще очень важно в разработке - см. http://html5please.com/#flexbox

Надеюсь, что это поможет.

Ответ 2

Я обычно использую float: left; и добавляю overflow: auto; в решить проблему сбрасывания родительских проблем (о том, почему это работает, overflow: auto будет развернуть родительский элемент вместо добавления полос прокрутки, если вы не укажете его явную высоту, также работает overflow: hidden). В большинстве случаев для вертикального выравнивания я имел для однострочный текст в списках меню, который можно решить с помощью свойства line-height. Если мне действительно нужно вертикально выровнять элемент блока, я бы установил явную высоту на родительском и вертикально выровненном элементе, положение абсолютное, верхнее 50% и отрицательное поле.

Причина, по которой я не использую display: table-cell, - это то, как она переполняется, когда у вас больше элементов, чем может обрабатывать ширина сайта. table-cell заставит пользователя прокручивать по горизонтали, в то время как поплавки будут обертывать меню переполнения, что делает его еще пригодным для использования без необходимости горизонтальной прокрутки.

Самое лучшее в float: left и overflow: auto - это то, что он работает вплоть до IE6 без хаков, возможно, даже дальше.

Ответ 3

Я бы сказал, это зависит от того, что вам нужно для этого:

• Если вам это нужно, чтобы получить 3-х столбцовый макет, я бы предложил сделать это с помощью float.

• Если вам это нужно для меню, вы можете использовать inline-block. Для проблемы с пробелами вы можете использовать несколько трюков, как описано Крисом Койером здесь http://css-tricks.com/fighting-the-space-between-inline-block-elements/.

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

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

Ответ 4

Я предпочитаю встроенный блок, хотя float также полезен. Табличная ячейка не отображается корректно старыми IE (ни встроенный блок, а там zoom: 1; *display: inline хак, который я часто использую). Если у вас есть дети, которые имеют меньшую высоту, чем их родитель, поплавки вернут их в начало, тогда как inline-block будет иногда испортиться.

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

Во всей реальности, да, это сводится к личным предпочтениям.

Один метод, который вы могли бы использовать, чтобы избавиться от пробела, заключался в том, чтобы установить font-size из 0 родительскому, а затем вернуть font-size детям, хотя это проблема и грубая.

Ответ 5

Только для записи, чтобы добавить ответ Spudley, есть также возможность использовать position: absolute и поля, если вы знаете ширину столбцов.

Для меня основная проблема при чистке метода заключается в том, нужны ли столбцы для заполнения всей высоты (равные высоты), где table-cell - самый простой метод (если вам не нравятся старые браузеры).

Ответ 6

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