css - 相对定位布局

Question

我想做这样的布局:

http://i.stack.imgur.com/uhgMg.jpg

#container
{
width:600px;
background:blue;
margin:0 auto;
}

.box
{
float:left;
width:196px;
height:318px;
background:red;
}

#box1
{
position:relative;
left:-140px;
float:left;
}

#box2
{
position:relative;
left:-102px;
}

#box3
{
position:relative;
left:-66px;
}

#box4 //this div is doing the mess because it's default position is under the other 3 divs and that's why the container stretches.
{
position:relative;
left:558px;
top:-318px;
}

<div id="container">

<div>RANDOM CONTENT</div>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>

<div style="clear:both"></div>
</div>

在某个容器中有 4 个相对定位的 div 彼此相邻。

我图片中的红线显示了容器高度应该结束的位置，但它不是因为最后一个 div 的默认位置在那里。由于上面的随机内容，我无法为容器设置固定高度。

怎么做？

Answer 1

创建宽度加起来不超过其包含元素宽度的 div。在这个例子中，你包含的 div 是 600 像素宽，但你有 784 像素值的元素，你试图在 float 中。如果你将它们更改为 148px 而不是198px 你应该不错。

虽然 - 我不确定您为什么使用 float 和相对定位。相对定位相对于它通常在文档中流动的位置进行定位……我可能会坚持使用 float:left; - 不需要相对定位。

或者，如果您希望它们像那样定位而不考虑其包含元素的宽度，只需使用绝对定位并完全删除 float 和相对。