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


281

Мои вопросы)

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

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

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

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

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


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

http://jsfiddle.net/CDe6a/

поплавок: левое изображение

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

отображения: встроенный;

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

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

дисплей: встроенное изображение

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

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

нет html пробелов

отображать: встроенный блок;

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

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

дисплей: встроенный блок изображения

отображения: настольные ячейки;

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

дисплей: изображение ячейки таблицы

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

Мои мысли:

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


4
Посмотрите, что используют парни из html5boilerplate и Twitter Bootstrap, и придерживайтесь этого
Роберт Нестрой

1
На css-tricks есть отличная статья о борьбе с космосом: css-tricks.com/fighting-the-space-between-inline-block-elements
Леа Розема,

Я попытался использовать это display: inlineсвойство и обнаружил, что оно не заботится о правильном заполнении дочерних элементов. Но если я использую display: inline-blockэто позаботится автоматически. Пожалуйста, смотрите ссылку - codepen.io/prashdeep/pen/rVOyvd Пожалуйста, дайте мне знать ваши входы на том же
zilcuanu

Ответы:


200

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

  • 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

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


2
Вам не нужна дополнительная разметка для очистки поплавков, см. мой ответ на этот счет.
Ли Райан

3
Самый надежный ответ = ответ.
EGHDK

2
Я всегда использую, inline-blockпотому что это сделано именно для этих случаев.
Рапли Андрас,

1
Хороший метод для удаления пробелов, которые создает inline-block, вы можете установить размер шрифта равным 0 для элемента контейнера, а затем установить нужный для самих встроенных элементов. Это позволяет избежать необходимости удалять пробелы в html
AlexMorley-Finch

1
@ AlexMorley-Finch: действительно, это одно хорошее решение. Имейте в виду, однако, что это не работает, если вы используете размеры шрифта в ems. Это означает, что это не может быть подходящим решением для всех случаев. Вам также может понравиться этот ответ, который я опубликовал отдельно, который охватывает этот вопрос, и другие варианты решения проблемы пробелов.
Спадли

34

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

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

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

введите описание изображения здесь


Это превосходное замечание, не упомянутое во многих популярных уроках. Пара вопросов: проверено ли это в разных браузерах? Какой метод вы выбрали для рисования разделителя между двумя блоками, такими как навигация и контент? Причина, по которой я спрашиваю, состоит в том, что если бы вышеупомянутые div были разной высоты, это было бы трудно.
Shital Shah

@ShitalShah: Я не совсем уверен, что вы подразумеваете под «этим», но я реализовал бесчисленное множество горизонтальных меню, а плавающий элемент влево и переполнение - это IMO - самый чистый и надежный способ реализации горизонтального меню во многих различных браузерах, старых и старых. новый. Для добавления разделителей я бы обычно использовал левую границу (или фоновые изображения для более красивых разделителей, если вам не нужно заботиться о старых браузерах, вы также можете использовать CSS3 border-image). Я не совсем понимаю, что вы имеете в виду под разной высотой, хотите объяснить больше или добавить скрипку?
Ли Райан

Это прояснило многое об очистке, и я не знал, что переполнение может сделать это. Я привык к методу: after, где вы добавляете контент: "." и видимость: скрыто. Спасибо за это
Nils_e

9

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

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

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

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

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


+1 за ссылку на статью Криса Койера. Одним из добавлений к его списку является метод, используемый сетками YUI Pure CSS : github.com/yui/pure/blob/master/src/grids/css/grids-core.css
Web_Designer

4

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

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

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

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


Если «вы всегда должны проверять, что IE не сосет», вы всегда будете разочарованы. хе - хе. (С другой стороны, он совершенно прав, говоря, что вы всегда должны проверять, чтобы ваш код не занимал каждую версию IE, которую вы хотите поддерживать)
Spudley

4

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

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


0

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

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.