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:left; - 不需要相对定位。

或者，如果你想让它们像这样定位而不管它们包含元素的宽度，只需使用绝对定位并完全删除float和relative。

Answer 2

为什么不分成3个部分

<div id="container">

<div class="cont">RANDOM CONTENT</div>
<div class="banner">
  <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>
<div style="clear:both"></div>
<div class="cont">RANDOM CONTENT</div>
</div>

和css

.banner {
    height: 318px;
    width: 800px;
    position: relative;
}
.cont {
width:600px;
background:blue;
margin:0 auto;
}

布局与相对定位

2 个答案: