具有相对位置的布局

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像素，但是您要尝试输入float的元素价值为784像素。如果将它们更改为148px而不是198px，则应该不错。]

尽管-我不确定您为什么要使用float和相对定位。相对定位相对于文档中正常流动的位置...我可能会坚持使用float:left;-不需要相对定位。

或者，如果无论它们包含的元素的宽度如何，都希望像这样定位它们，则只需使用绝对定位，并完全将float和相对放置。

Answer 2

为什么不分成三部分