具有相对定位的布局

Question

我想制作这个布局：

https://i.sstatic.net/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 像素。如果您将它们更改为 148px 而不是198px 你应该很好。

不过 - 我不确定你为什么要使用浮动和相对定位。相对定位将某些内容相对于文档中通常流动的位置进行定位...我可能会坚持使用 float:left; - 不需要相对定位。

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

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;
}