Использование не плавающих <div>с для создания макетов страниц

Question

Мне нужен макет таблицы для веб-страницы, но, поскольку кто-то решил, что нам больше не следует использовать <table> s, я ищу это с <div>.

Насколько я знаю, стандартный способ сделать это - применить float: left к последующим <div> с, которые должны помещаться в одном ряду. Это имеет тенденцию нарушать макет, если я пытаюсь центрировать страницу.

Есть ли хороший способ создать макет <div> на основе таблицы, не полагаясь на плавающие числа? Я скучаю по старым добрым временам, когда я мог сделать макет на основе таблицы за три минуты, используя только <table>, <tr> и <td>.

Answer 1

Вы можете использовать теги <div>, а затем установить их CSS на display:table и display:table-cell.Философия, лежащая в основе неиспользования фактических тегов <table>, <td>, <tr> для не табличных данных , заключается в том, чтобы предотвратить смешивание содержимого с макетом.существует в HTML по одной причине: для отображения табличных данных.Но затем border = "0" позволила дизайнерам создать сетку для размещения изображений и текста.По-прежнему являясь наиболее доминирующим средством проектирования визуально насыщенных веб-сайтов, использование таблиц в настоящее время фактически мешает созданию лучшей, более доступной, гибкой и функциональной сети.Узнайте, откуда возникли проблемы, и найдите решения для создания переходного или полностью без таблиц макета.

https://www.hotdesign.com/seybold/

Answer 2

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

Во всяком случае, техника, которую мы часто используем, представляет собой сочетание абсолютного позиционирования и полей для уменьшения размераэлементы вокруг центральной, естественно расширяющейся области «основного контента».Это не дает вещам взорваться так сильно, когда они превышают заданные пределы размера или что у вас есть.

Answer 3

Это дает вам представление о том, что можно сделать:

<div id="wrapper">

    <div id="logo">
    </div>

    <div id="contact">
    </div>

    <br class="clear" />

    <div class="another">
    </div>

    <div class="another">
    </div>

</div>

CSS

#wrapper {width:600px; margin:0 auto; border:1px solid #000;} 
  // wrapper is a containing div.  margin 0 auto centers it

#logo {margin:0; padding:0; float:left; width:196px; 
    border:1px solid green; height:50px;}
  //get rid of the paddings and margin (same below)
  //as with #contact below, width adds up to 600px -4px for 1px border 
  //on each side 

#contact {margin:0; padding:0; float:left; width:400px; 
    border:1px solid red; height:50px;}

.another {height:100px; border:1px solid blue;}

.clear {clear:both;}
  //used to get content right after floated bits.

http://jsfiddle.net/jasongennaro/p4LpT/1/

Answer 4

Уже есть пара фреймворков, которые помогут вам в этом переходе.Yahoo!( Сброс , База , Шрифты , & Сетки ) и Blueprint являются хорошими.Однако они оба используют поплавки (мне тоже не нравится чрезмерное использование поплавков).Одна вещь, которая мне всегда не нравилась в любой среде CSS, это то, что она использует многие классы CSS вместо правильно сформированных документов и практики HTML для поиска элементов и создания макета.

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

Answer 5

CSS макеты не ломаются, если вы создаете их правильно.

Фактически, большинство крупных веб-сайтов отошли от табличных макетов более 5 лет назад.Вот некоторые сайты, на которых есть отличные примеры макетов CSS:

http://www.pmob.co.uk/

http://glish.com/css/#tutorials

Вот сайт по позиционированию CSS:

http://www.digital -web.com / extras / positioning_101 / css_positioning_example.php

Еще один сайт по позиционированию.Отлично сработано.Только на этой странице вы сможете создать любой макет, который вам нужен:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS стартовые шаблоны:

http://www.mycelly.com/

методы здесь были проверены десятью тысячами разных способов с разными браузерами;большинство из них не имеют проблем и выглядят одинаково в большинстве из них.В любом случае, выйти из таблиц макетов.Если по одной причине, поисковые системы так же, как и простой макет страницы на основе CSS, больше, чем инкапсулированный метод макетов на основе таблиц.

И эти причины тоже:

http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/

Answer 6

Макеты с плавающими элементами широко используются и не ломаются, если вы правильно их стилизуете.Обычно плавающие элементы находятся внутри упаковочного элемента, который сохраняет свою позицию, затем вы можете переместить его, чтобы переместить плавающие элементы на его внутренней стороне.

Вы также можете использовать display:inline-block, чтобы получить аналогичный результат как плавающие элементы, хотяDifferent.

Вы также можете получить тот же эффект таблицы, используя только div или любой другой элемент, который вам нравится, но это не имеет особого смысла.Если вам нужны таблицы (например, для отображения большого количества хорошо отформатированных данных), используйте их.Для макетов CSS в стиле div гораздо лучше.

Существует множество учебных пособий, только поиск по макетам CSS.

Редактирование

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