UcallWeconn

Выкарыстанне CSS display:table для макета


Original on www.onenaught.com
© www.onenaught.com

The translation is provided by UcallWeconn S.M.B.A. — a company, which sells cheap VoIP minutes

post

Я напісаў гэты пост у праект у кастрычніку 2008 гады. Я думаў, што рэдызайн гэтага блога сайта з дапамогай display:table і растлумачыць шэраг пастоў, пачынаючы з гэтага. Але я так і не знайшоў часу для рэарганізацыі!

Тым не менш, я выкарыстоўваю display:table на працягу 6 месяцаў, таму я думаў, а пасля гэтага як яно ёсць, і, магчыма, наступнай дзейнасці з вялікай колькасцю прыкладаў пазней.

Акрамя таго, каля 3 тыдняў пасля таго як я пачаў гэты праект, Rachel Andrew і Kevin Yank напісалі кнігу о CSS display:table для разметкі, а таксама карысныя артыкулы рэзюмэ! Я настойліва рэкамендую шанаваць артыкул да драбнюткіх дэталяў.

Няма неабходнасці ў плывучай вёрстцы CSS для сучасных браўзараў

На працягу некалькіх гадоў, вэб-распрацоўнікі робяць CSS-макеты, заснаваныя на выкарыстанні float-блокаў ці на абсалютным пазіцыянаванне для вэб-сайтаў, каб пазбегнуць выкарыстанні не-семантычнага HTML <table> кода.

Хоць гэта выканальна з дапамогай дадатковых хакаў (галоўным чынам для IE), некаторыя, здавалася б, простыя рэчы, можа быць, зрабіць складаней, чым гэта неабходна (напрыклад, роўная вышыня калонак).

Аднак ёсць больш простае рашэнні на аснове display:table, display:table-row, display:table-cell і г.д., выкарыстоўваных сёння ў Firefox 2+, Safari 3+, Opera 9+ і IE8.

Прыклад:

Разгледзім наступны HTML:

<body>
<div id="header">
<!-- header -->
</div>
<div id="content-body-wrapper">
<div id="content-body">
<div id="primary-nav">
<!-- some navigation column here -->
</div>
<div id="secondary-nav">
<!-- some additional column here -->
</div>
<div id="content">
<!-- main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- footer -->
</div>
</body>

І CSS-стыль, каб атрымаць роўныя калонкі з роўнай вышынёй:

#content-body-wrapper {
display:table;
border-collapse:collapse;
}
#content-body {
display:table-row;
}
#primary-nav, #secondary-nav, #content {
display:table-cell;
}
#primary-nav, #secondary-nav {
width:20%;
}
#content {
width:60%;
}

І вось яно што!

Вышэй вы бачылі толькі трохі CSS. Вось некалькі скрыншотаў (клікніце для аднаўлення поўнага памеру) з утрыманнем і вельмі простым дызайнаў, каб паглядзець, уплыў вышыня калонак:

display display

Першы з Firefox 3 і другі з IE8.

Вы можаце фактычна выключыць дадатковыя DIV-ы, нават адзін, які адлюстроўваецца: стол і браўзар, неабходныя для стварэння.

Хіба гэта не выкарыстанне табліц для разметкі?

Гэта не тое ж самае, структурныя элементы табліцы HTML для разметкі - што, сапраўды, з'яўляецца нерацыянальным выкарыстаннем табліц.

Гэта выкарыстанне CSS даць табліцы тыпу адлюстраванні, і гэта добра, як яна пакідае HTML (і структуры дакумента) у такт.

А IE 7 і 6?

У IE7 і 6, вядома, застаюцца праблемы, але вы можаце выкарыстоўваць умоўныя каментары, і даць ім старыя метады, якія спрабуюць дамагчыся гэтага.

Некаторыя абмежаванні і праблемы

Некаторыя абмежаванні CSS адлюстраванні: табліца я сутыкаўся, аднак, складаюцца з:

  • Адсутнасць Аб'яднанні/эквіваленты ROWSPAN
  • Як табліц HTML, CSS вочкі можна пашырыць у шырыню ў залежнасці ад утрымання (як і вышыня).

На апошняй адзін я заўважыў гэта пры выкарыстанні рэчы, як <pre> нават з пералівам: аўта з думкай, што гэтак жа, як усярэдзіне плавалі калоны шырынёй прызначаны гэта прывядзе ў гэтых <pre> блокаў атрымаць гарызантальныя скруткі, калі яны сталі занадта вялікі.

Замест гэтага, як і ў HTML табліцы, яны пхаюць з вочка яны ўсярэдзіне Адзіны спосаб рашэння праблемы, які я ведаю, гэта павінна было даць пікселяў ці ет шырыню такіх элементаў. (Гэта таксама ставіцца і да вялікай малюнкаў у вочкі.)

Пры гэтым, display:table здаецца шмат чысцей!

CSS3 мае пашыраны модуль макет у працах але не Існуюць якія любым браўзары рэалізацыі яго (што я ведаю), так што ў прамежкавы перыяд гэта можа быць карысным падыходам.

Больш інфармацыі


Valid CSS Valid XHTML 1.0 Transitional

---