Макет с тремя столбцами с несколькими элементами в левом и правом столбцах - PullRequest
Новая
       9

Макет с тремя столбцами с несколькими элементами в левом и правом столбцах

1 голос
/ 19 февраля 2009

У меня есть некоторый HTML, который выглядит так: 

<body>
    <div id="panel1" class="panel"> Panel 1 </div>
    <div id="panel2" class="panel"> Panel 2 </div>
    <div id="panel3" class="panel"> Panel 3 </div>
    <div id="panel4" class="panel"> Panel 4 </div>
    <div id="panel5" class="panel"> Panel 5 </div>
    <div id="panel6" class="panel"> Panel 6 </div>
    <div id="panel7" class="panel"> Panel 7 </div>
    <div id="contentheader"> Header </div>
    <div id="content"> Content </div>
</body>

Я хотел бы, чтобы некоторые панели (скажем, 1-4) располагались слева, остальные (5-7) - справа, а заголовок и содержимое между ними, в идеале без необходимость обернуть левую и правую панели в обертку div.

Ответы [ 4 ]

5 голосов
/ 19 февраля 2009

Используйте простой в использовании CSS-фреймворк, такой как Blueprint CSS , The Golden Grid или 960 . Они имеют отличную кроссплатформенную поддержку для разработки веб-сайтов, основанных на сетке, таких как тот, над которым вы работаете. Вам не придется беспокоиться о мельчайших песчинках.

0 голосов
/ 20 февраля 2009

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

Если фиксированная ширина, ваша жизнь будет намного проще, и вы можете использовать одну из нескольких популярных систем сеток CSS: blueprint , yui , 960 и т. д.

Если жидкость, вы должны использовать технику с 3 колонками, описанную на alistapart.com .

0 голосов
/ 20 февраля 2009

Если вы знаете ширину ваших панелей (слева, справа, заголовок и содержимое) и высоту заголовка, вы можете задать заголовок и содержимое: {position: absolute; } и поместите его между панелями.

Если вы не знаете ширины контента, вы, вероятно, столкнетесь с некоторыми проблемами IE ...

(просто угадаю, я не пробовал)

0 голосов
/ 19 февраля 2009

Как насчет того, чтобы обернуть #contentHeader и #content в div и поместить их как одну из ваших панелей? Вы должны были бы поместить это среди них ... (div1, 2, 3, 4, content, 5, 6, 7).

Зависит от того, что вы знаете о ширине панелей и содержимом, я бы сказал.

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

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

...