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

Мои вопросы)

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

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

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

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

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

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

http://jsfiddle.net/CDe6a/

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

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

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

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

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

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

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

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

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

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

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

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

Мои мысли:

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

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

• 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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