CSS - Как мы должны сделать 3-6 макетов столбцов с CSS без таблицы? - PullRequest
Новая
       5

CSS - Как мы должны сделать 3-6 макетов столбцов с CSS без таблицы?

3 голосов
/ 02 июля 2010

Как мы должны сделать 6 макетов столбцов с CSS без таблиц и один слой выше и один слой снизу? (с поплавками? безуспешно)

Спасибо

Ответы [ 6 ]

5 голосов
/ 02 июля 2010

Вот простой макет из трех столбцов с верхним и нижним колонтитулом: 

<!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
  width: 33%;
  border: 1px solid gray;
  float: left;
}

#footer {
  clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>

При перемещении столбцов они появляются рядом друг с другом.Используя clear: both для нижнего колонтитула, он расположен ниже столбцов.

В последних браузерах вы можете реализовать столбцы гораздо проще, используя CSS3 макет из нескольких столбцов.

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

Для более подробного обсуждения кросс-браузерной разметки нескольких столбцов я настоятельно рекомендую Мастерство CSS: передовые веб-стандарты. Отличная книга.

2 голосов
/ 02 июля 2010

вы должны использовать "ul" / 

<header></header>
<ul id="columner">
 <li>
  <ul> 
    <li class="one"></li> 
    <li class="two"></li> 
    <li class="thr"></li> 
    <li class="fou"></li> 
    <li class="fiv"></li> 
    <li class="six"></li> 
  </ul>
 </li>
 <li>
  <ul> 
    <li class="one"></li> 
    <li class="two"></li> 
    <li class="thr"></li> 
    <li class="fou"></li> 
    <li class="fiv"></li> 
    <li class="six"></li> 
  </ul>
 </li>
</ul>
<footer></footer>
2 голосов
/ 02 июля 2010

Даже проще, чем бороться с плавающими и прозрачными плавающими объектами и т. Д., Использовать CSS-макет, например Blueprint (http://www.blueprintcss.org/) или 960 сеток (http://960.gs/).). они работают, создавая виртуальную сеточную систему на вашей странице - чтобы получить 6 столбцов, вы бы поделили общее количество сеток на экране (или на вашем контейнере) на 6 и вуаля, идеальные сетки каждый раз без перекрытия и ошибок нет.

Даже если вы хорошо разбираетесь в плаваниях, есть некоторые довольно сумасшедшие причуды, которые вы можете полностью избежать с помощью фреймворка, который уже нанес ущерб мозгу. Бонус указывает на эти фреймворки с CSS-сбросом, который, по сути, делает все браузеры «одинаковыми».

2 голосов
/ 02 июля 2010

Что я обычно делаю, так это плаваю во всех, кроме одной из моих колонок слева, а последняя - справа. Затем я применяю правое поле ко всем столбцам, кроме двух последних. Это связано с тем, что между ними создается водосточный желоб из-за разницы в поплавке, но он также дает разным браузерам некоторую свободу действий, чтобы компоновка не нарушалась.

Что касается слоя ниже (думаю, вы имеете в виду нижний колонтитул), вы используете 

clear: both;

Например, если моя страница была шириной 65em (я обычно работаю в ems), и мне нужно 6 столбцов, я даю всем своим столбцам ширину 10em, и я плаваю столбцы 1-5 влево, а столбец 6 справа , Затем я даю столбцам 1-4 правое поле 1em.

1 голос
/ 02 июля 2010

попробуйте использовать некоторые генераторы онлайн, как это: http://csscreator.com/version2/pagelayout.php или это http://www.cssportal.com/layout-generator/

0 голосов
/ 12 сентября 2011

Я только что попробовал этот 6-колонный макет с помощью css, и он, кажется, работает хорошо - я основал его на шаблоне шириной 960px, но вы можете отрегулировать число, чтобы заполнить макет любого размера:1003 * Я попробовал это на последних версиях Firefox и Safari, а также на браузере IE 7, и все работало хорошо.Я добавил обертку в CSS, потому что я не хотел, чтобы ящики располагались друг под другом, если кто-то сжал их браузер.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...