概述:
我正在尝试创建下面详述的相对简单的页面布局，但无论我如何尝试处理它都会遇到问题。
概念:
- 标准大小的 block 布局。我将引用单位宽度:每个内容 block 都是 240 像素的正方形，周围有 5 像素的边距。
- 固定宽度为 1 个单位的左列(245 像素 - 1 个 block + 左边距)。这里没有问题。
- 右列的可变宽度以填充剩余空间。这里也没有问题。
- 在左列中，许多 1unit x 1unit block 固定在列下方。顶部还有一些空白区域 - 同样，这不是问题。
- 在右栏中:一些标准单位大小的自由 float block ，它们 float 并填充浏览器窗口给它们的空间。这里没有问题。
- 最后，一个元素，2 个单位宽，一半在左列，一半在右列，右列的方 block 仍然漂浮在周围。 这里有龙。
问题:
无论我如何处理，它都会出错。下面是我现有的解决方案尝试的代码。我当前的问题是右侧的 1x1 block 不符合 2x1 block ，因此 2x1 block 的一半被右侧列中的 1x1 block 覆盖。
我知道这几乎肯定是 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 解决方案，我会非常高兴。
最佳答案
关于#bigblock:
- 移除上边距:-240px
- 添加左边距:-240px
然后，将#bigblock 放在右列中，使其成为第 5 个 DIV。
请注意，这仅适用于固定宽度的容器。如果你调整浏览器的大小，你会看到#bigblock 移动。
你有没有看过像 bluprint 这样的 CSS 框架？或 960 Grid System ？它们可能会帮助您实现您的目标。
关于元素跨列的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2750255/