поплавок: зліва; vs дисплей: вбудований; vs дисплей: вбудований блок; vs дисплей: таблиця-комірка;

281

Мої питання

Чи бажаний будь-який із цих методів професійним веб-дизайнером?
Чи будь-який із цих методів надає перевагу веб-браузеру під час малювання веб-сайту?
Це все лише особисті переваги?
Чи є інші методики, яких мені не вистачає?

Примітка. Вищенаведені питання стосуються розробки багатоколонного макета

поплавок: зліва;

float: зображення ліворуч

Це метод, який я завжди використовую при створенні макетів стовпців, і він, здається, працює чудово. Батько все ж руйнується на собі, тому вам потрібно просто пам’ятати про це 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;. Я прочитав багато статей і блогів про це в Інтернеті, але жодна з них не дає мені однозначної відповіді на те, що я повинен використовувати, коли викладаю свій веб-сайт.

html css css-float

— EGHDK
джерело

4

Подивіться, що використовують хлопці на html5boilerplate та Twitter Bootstrap та дотримуйтесь цього

— Роберт Неєстрой

1

Існує чудова стаття про боротьбу з космосом у css-трюках: css-tricks.com/fighting-the-space-bet between-inline-block-elements

— Lea Rosema

Я спробував скористатись display: inlineвластивістю, і виявив, що вона не переймається належним чином накладками на дочірні елементи. Але якщо я цим скористаюся, display: inline-blockце подбає автоматично. Перейдіть за посиланням - codepen.io/prashdeep/pen/rVOyvd Будь ласка, повідомте мені ваші дані про те саме

— zilcuanu

200

З питань, про які ви запитали:

float:left;
Мені не подобається floats через необхідність мати додаткову розмітку для очищення 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

вам не потрібна додаткова розмітка, щоб очистити поплавці, дивіться мою відповідь на це.

— Лі Лі Раян

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 є те, як вона переповнюється, коли у вас є більше елементів, ніж ширина сайту. комірка таблиці змусить користувача прокручуватися по горизонталі, тоді як поплавці загортають меню переповнення, роблячи його ще корисним без необхідності горизонтальної прокрутки.

Найкраще про float: left and overflow: auto - це те, що він працює весь шлях до IE6 без злому, можливо, навіть далі.

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

— Лежать Раян
джерело

Це чудовий момент, який не згадується у МНОГО популярних навчальних посібниках. Пара запитань: чи справді це перевірено в різних браузерах? Який ваш спосіб вибору провести роздільник між двома блоками, такими як nav і content? Причина, яку я запитую, полягає в тому, що якщо вище диви різної висоти, було б важко.

— Shital Shah

@ShitalShah: Я не зовсім впевнений, що ви маєте на увазі під "цим", але я реалізував незліченну кількість горизонтальних меню, а поплавок ліворуч та перелив є IMO - найчистіший та найнадійніший спосіб впровадити горизонтальне меню у багатьох різних браузерах, старих і нові. Для додавання роздільників я зазвичай використовую ліву рамку (або фонові зображення для вигадливіших роздільників, якщо вам не потрібно піклуватися про старий браузер, тоді ви також можете використовувати CSS3-межу-зображення). Я не зовсім розумію, що ви маєте на увазі під різними висотами, хочете пояснити більше чи додати загадку?

— Лже Раян

Це багато чого зрозуміло про очищення, і я не знав, що перелив може це зробити. Я звик до методу: after, коли u додає вміст: "." та видимість: приховано. Дякую за це

— Nils_e

9

Я б сказав, що це залежить від того, для чого вам це потрібно:

Якщо вам потрібно просто отримати макет 3 стовпців, я б запропонував це зробити float.
Якщо вам це потрібно для меню, ви можете використовувати inline-block. Для проблеми з пробілом можна скористатися кількома хитрощами, як описав Кріс Койєр тут http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .
Якщо вам потрібно зробити варіант з декількома варіантами, ширина якого повинна рівномірно розподілятися всередині вказаного поля, то я вважаю за краще display: table. Це не працює належним чином у деяких браузерах, тому це залежить від підтримки вашого браузера.

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

— Зенді
джерело

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

— Web_Designer

4

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

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

Зрештою, так, це зводиться до особистих уподобань.

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

— Чад
джерело

якщо "вам завжди доведеться перевірити, чи IE не смокче", то ви завжди будете розчаровані. хе-хе. (З іншого боку, він цілком справедливо стверджує, що ви завжди повинні перевіряти, чи не

— входить

4

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

Для мене головне питання при обробці методу полягає в тому, чи потрібні вам стовпчики для заповнення всієї висоти (рівних висот), де комірка таблиці - це найпростіший метод (якщо ви не дуже переймаєтесь старими браузерами).

— Wtower
джерело

0

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

— Аліреза
джерело