it-swarm.com.ru

плыть налево; против дисплея: встроенный; vs display: встроенный блок; против отображения: ячейка таблицы;

Мои вопросы)

  1. Любой из этих методов предпочитает профессиональный веб-дизайнер?

  2. Любой из этих методов предпочтительнее веб-браузера при рисовании веб-сайта?

  3. Это все только личные предпочтения?

  4. Есть ли другие техники, которые мне не хватает?

Примечание. Приведенные выше вопросы касаются разработки многостолбцовой компоновки


плыть налево;

http://jsfiddle.net/CDe6a/

float:left image

Это метод, который я всегда использую при создании макетов столбцов, и он, кажется, работает очень хорошо. Родитель, однако, рушится сам по себе, поэтому вам просто нужно помнить clear:both; впоследствии. Еще один con , который я только что обнаружил, - это невозможность выравнивания текста по вертикали.

дисплей: встроенный;

Это, кажется, исправляет проблему коллапсирующего родителя, но добавляет пробел.

http://jsfiddle.net/CDe6a/1/

display:inline image

Удаление пробелов из HTML, кажется, является самым простым решением этой проблемы, но нежелательно, если вы действительно разборчивы в своем HTML.

http://jsfiddle.net/CDe6a/2/

no html whitespace image

дисплей: встроенный блок;

Кажется, ведет себя точно так же, как display:inline;.

http://jsfiddle.net/CDe6a/3/

display:inline-block image

дисплей: таблица-клетки;

http://jsfiddle.net/CDe6a/4/

display:table-cell image

Работает отлично.

Мои мысли:

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

281
EGHDK

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

  • float:left;
    Мне не нравятся поплавки из-за необходимости иметь дополнительную разметку для очистки поплавка. Насколько мне известно, вся концепция 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 Columns , о которой вы, возможно, захотите узнать. Однако это не самая хорошо поддерживаемая функция (не поддерживается IE даже в IE9, а также префикс поставщика, необходимый для всех других браузеров), поэтому вы можете ее не использовать. Но это еще один вариант, и вы спросили.

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

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

199
Spudley

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

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

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

enter image description here

34
Lie Ryan

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

  1. Если вам нужно получить только 3 колонки, я бы предложил сделать это с float.

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

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

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

9
Zendy

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

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

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

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

4
Chad

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

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

4
Wtower

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

enter image description here

0
Alireza