Вопрос по html5, html, css, css3 – CSS: вертикальное расположение столбцов без <table>

4

Хорошо, я наклонился html & amp; css еще в 2001 году. Я привык делать что-то вроде этого (чтобы создать веб-сайт с макетом «вертикальный столбец»):

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / header -->

<!-- / content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!-- / content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / footer -->
</table>
</body>
</html>

Легко, все автоматически выровняется так, как я хочу, без головной боли и т. Д. Жизнь тогда была хорошей. ОДНАКО, не так давно я читал, что этот подход больше не должен использоваться. Я собирался попробовать новый способ, используя кучу div'ов, но w3c & amp; Проверка w3c не нравится, когда вы используете блочные элементы в качестве встроенных элементов ... WTF !!!

Итак ... мое разочарование заставило меня спросить вас, ребята:

HOW? Как сделать что-то подобное «современным способом» ... как можно проще? У HTML 5 есть лучший способ?
WHY? Почему сейчас нам не следует использовать этот табличный подход для получения «вертикального расположения столбцов»? на сайте?

Мое мнение таково: если w3c и тому подобное придумают эти «правила» и изменения, они также должны обеспечивать совместимость & amp; кросс-браузерное решение изменений, которые они вносят. Omar
Поплавки являются для меня головной болью и не ладят. У них действительно странное поведение. Они не прямолинейны, как блочные элементы. Как предотвратить эти проблемы с плавающей точкой, чтобы я мог чувствовать себя более уверенно при использовании поплавков? - На данный момент я избегаю их на 100%, так как не могу контролировать их странности. Например, они имеют тенденцию перекрываться, менять положение друг на друге, появляться в местах, где их не должно быть, и т. Д. И т. Д. Omar

Ваш Ответ

3   ответа
5

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

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

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <header></header>

    <div class="content grid">
        <div id="col1" class="col s1of3"></div>
        <div id="col2" class="col s1of3"></div>
        <div id="col3" class="col s1of3"></div>
    </div>

    <footer></footer>

</body>
</html>

CSS:

.grid {
}
    .grid .col { float: left; }

    .grid .col.s1of1 { width: 100%; }
    .grid .col.s1of2 { width: 50%; }
    .grid .col.s1of3 { width: 33.33333333%; }
    .grid .col.s2of3 { width: 66.66666666%; }
    .grid .col.s1of4 { width: 25%; }
    .grid .col.s3of4 { width: 75%; }
    .grid .col.s1of5 { width: 20%; }
    .grid .col.s2of5 { width: 40%; }
    .grid .col.s3of5 { width: 60%; }
    .grid .col.s4of5 { width: 80%; }
Это очень похоже наOOCSS, Ницца!
2

но они не очень хороши в плане совместимости, и значительное количество опций не поддерживается большим количеством браузеров.

Если вы хотите создать столбцы переменной / фиксированной ширины, то, вероятно, это статья, которую вы ищете:

http://www.alistapart.com/articles/holygrail

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

Если вы просто хотите изменить размер всех ваших столбцов, просто сделайте их всеfloat: left, а такжеwidth: {percentage of page}%

В случае столбцов фиксированного размера. Скажем, 2 столбца,id="content_left" style="width: 500px" а такжеid="content_right" style="width: 300px"? Кроме того, должен ли я использовать span 's' или 'div' s ej:<span id="content_left> или же<div id="content_left>? Omar
float это, пожалуй, основной инструмент большинства макетов CSS. Присаживайся и попробуй. ;)
Если вы хотите получить 500px div слева и 300px справа, то да. А такжеspan для определения небольшого стиля вокруг текста (например, сделать его другим цветом), где какdiv для содержания блока контента, такdiv это то, что вы используете.
Последнее, что ... float - это головная боль для меня, и она не очень хорошо ладит. У них действительно странное поведение. Они не прямолинейны, как блочные элементы. Как мне предотвратить этоfloat проблемы, чтобы я мог чувствовать себя более уверенно при использовании поплавков? - На данный момент я избегаю их на 100%, так как не могу контролировать их странности. Например, они имеют тенденцию перекрываться, менять позиции друг на друге, появляться в местах, где их не должно быть, и т. Д. И т. Д. Я вижуfloat в качестве «черной овцы» из семьи CSS Omar
6
HOW?

компоновка столбца Google 3 CSS. Это хорошо освещалось в течение последних 6 лет или около того, и есть множество учебных пособий.

Вариант 2: Google "CSS Framework" и выберите один, чтобы построить свой макет. 960.gs является популярным.

WHY?

В идеале вы должны использовать таблицы для табличных данных и CSS для разметки остальной части страницы. Зачем? Ну, в теории, CSS дает вам гораздо больше гибкости. Лучший пример, вероятно, когда дело доходит до адаптивного веб-дизайна. На iPhone мне могут понадобиться 2 колонки. На моем iPad я могу захотеть 4 колонки. Все это может быть сделано с помощью CSS, но становится действительно сложным, если вы жестко связываете HTML с помощью таблиц.

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

Похожие вопросы