Обзор:
Я пытаюсь создать сравнительно простой макет страницы, подробно описанный ниже, и сталкиваюсь с проблемами независимо от того, как я к нему подхожу.
Концепция:
- Блок-макет стандартного размера. Я процитирую единицу ширины: каждый блок контента имеет площадь 240px с полями 5px вокруг него.
- Левый столбец с фиксированной шириной в 1 единицу (245 пикселей - 1 блок + поле слева). Здесь нет проблем.
- Правый столбец переменной ширины, чтобы заполнить оставшееся пространство. Здесь тоже никаких проблем.
- В левом столбце в столбце зафиксировано количество блоков размером 1 единица x 1 единица. Также некоторое свободное место вверху - опять же, не проблема.
- В правом столбце: количество свободно плавающих блоков стандартных размеров, которые плавают вокруг и заполняют пространство, предоставленное им окном браузера. Здесь нет проблем.
- Наконец, один элемент шириной 2 единицы, который находится наполовину в левом столбце и наполовину в правом столбце, и вокруг которого все еще плавают блоки в правом столбце. Здесь будут драконы.
Смотрите здесь схему .
Проблема:
Независимо от того, как я подхожу к этому, все идет не так. Ниже приведен код моей попытки найти решение. Моя текущая проблема заключается в том, что блоки 1x1 справа не соответствуют блоку 2x1, и в результате половина блока 2x1 перезаписывается блоком 1x1 в правом столбце.
Я знаю, что это почти наверняка проблема с position: absolute выводом вещей из потока. Тем не менее, я не могу найти способ обойти то, что не просто вызывает другую проблему.
Код:
<html>
<head>
<title>wat</title>
<style type="text/css">
body {
background: #ccc;
color: #000;
padding: 0px 5px 5px 0px;
margin: 0px;
}
#leftcol {
width: 245px;
margin-top: 490px;
position: absolute;
}
#rightcol {
left: 245px;
position: absolute;
}
#bigblock {
float: left;
position: relative;
margin-top: -240px;
background: red;
}
.cblock {
margin: 5px 0px 0px 5px;
float: left;
overflow: hidden;
display: block;
background: #fff;
}
.w1 {
width: 240px;
}
.w2 {
width: 485px;
}
.l1 {
height: 240px;
}
</head>
<body>
<div class="cblock w2 l1" id="bigblock">
<h1>DRAGONS</h1>
<p>Here be they</p>
</div>
<div id="leftcol">
<div class="cblock w1 l1">
<h1>Left 1</h1>
<p>1x1 block</p>
</div>
</div>
<div id="rightcol">
<div class="cblock w1 l1">
<h1>Right 1</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 2</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 3</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 4</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 5</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 6</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 7</h1>
<p>1x1 block</p>
</div>
</div>
</body>
</html>
Ограничения:
И последнее замечание: мне нужна кросс-браузерная совместимость, хотя я более чем рад применить это с JS, если это необходимо. Тем не менее, если существует решение только для CSS, я был бы очень счастлив.