CSS: плавающие DIV в нечетном порядке? - PullRequest
Новая
       45

CSS: плавающие DIV в нечетном порядке?

0 голосов
/ 14 июля 2011

Хорошо, я пытаюсь написать CSS для интернет-магазина Amazon. Они форматируют страницы так:

Default Layout

С некоторыми изменениями и удалением правого столбца (ненужного для нашего макета) мне удалось получить макет, как показано ниже:

What I have now.

Проблема в том, что красные области просто пусты, и я бы хотел, чтобы левый столбец занимал всю сторону, вот так:

What I would like.

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

<header divs>
<top divs>
<left divs>
<center divs>
<right divs>
<bottom divs>
<footer divs>

Все, что находится между верхним и нижним колонтитулами (сверху, слева, справа, по центру и снизу), содержится в элементе оболочки.

Какая будет общая установка для этого? Я не могу изменить порядок DIV, поэтому мне просто нужно знать, можно ли это сделать или нет, и если да, какой-то код был бы великолепен.

К сожалению, я не могу публиковать HTML или что-то еще, потому что вы не можете получить к нему доступ. Мне просто нужно базовое представление, как у этих div'ов есть это число с плавающей запятой, с этим и т. Д.

Спасибо!

Ответы [ 2 ]

1 голос
/ 14 июля 2011

Проверено только в Chrome, поэтому вы можете посмотреть на это в других браузерах.

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

JsFiddle: http://jsfiddle.net/6SjEm/

HTML: 

<div id="header">HEADER</div>
<div id="top">TOP</div>
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
<div id="bottom">BOTTOM</div>
<div id="footer">FOOTER</div>

CSS: 

body { font: 20px sans-serif; color: #FFF; text-align: center; }
#header, #footer { background: #000; height: 100px; }
#top, #bottom { background: #333; height: 50px; }
#right { display: none; }

#top { margin-left: 220px; }
#left {
    background: #666;
    float: left;
    height: 300px;
    margin-top: -50px;
    width: 220px;
}
#center { 
    background: #999;
    clear: right;
    height: 100px;
    margin-left: 220px;
}
#bottom { margin-left: 220px; }
#footer { clear: both; }
0 голосов
/ 14 июля 2011

Вы можете использовать трюк с отрицательными полями для верха, центра и низа, в зависимости от структуры разметки. Смотри http://www.alistapart.com/articles/negativemargins/.

...