绝对定位的div下如何定位

Question

我有4个包含图片的div，它们是绝对定位的，总宽度为100%。

这是因为用户希望在所有浏览器中使用页面的全部宽度。

我需要在其下方定位一个div，它也具有100%的宽度，并且与浏览器以相同的比例扩展/收缩。

我知道浮动不是一个选项。

期望的布局：

[img1][img2][img3][img4]
[       content        ]
-------100% width-------

HTML

     <div id="container">
          <div id="image1"><img src="images/1.jpg"></div>
          <div id="image2"><img src="images/2.jpg"></div>
          <div id="image3"><img src="images/3.jpg"></div>
          <div id="image4"><img src="images/4.jpg"></div>
        </div>

     <div id="content">
     </div>

CSS（层叠样式表）：

#container{
    width: 100%;
    position: relative;
    height: auto;
}

#image1 {
       width: 25%;
      position: absolute;
      right: 50%;   
}
#image2 {
    width: 25%;
    position: absolute;
     right: 75%;

#image3 {
    width: 25%;
    position: absolute;
     left: 50%;
}
#image4 {
    width: 25%;
    position: absolute;
     left: 75%;
}

#content {
   width: 100%;
   height: auto;
}

img {
    max-width: 100%;
   height: auto;
}

- benc

---

为什么需要绝对值？为什么浮点数不是一个选项？ - earthdesigner

据我所知，浮动不起作用，因为绝对定位的元素被从工作流中取出。如果有一种方法可以允许图片大小调整并使用浮动实现100%宽度将是很棒的 :) - benc

Answer 1

使用此方法

演示 ---------------------------- 第二个演示

Css

#pic-container{
font-size:0;
}
#pic-container img{
width:25%;
  vertical-align:top;
}

HTML

   <div class="container">
     <div id="pic-container">
 <img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
      </div>
     </div>
     <div class="container">
                herer is the your content         
     </div>

现场演示

- Rohit Azad Malik

---

哇，我把它搞得太复杂了！只是在本地安装上进行测试。 - benc

font-size:0对图像有什么影响？ - benc

谢谢。你能推荐一些关于“高级”定位的学习材料吗？ - benc

欢迎访问此链接并学习更多关于位置的内容：http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ - Rohit Azad Malik

你在线吗？有一个快速的工作需要完成吗？ - benc

Answer 2

如果我没看错的话，请查看您的CSS代码：

您忘记了在 #image2 中放置闭合的“}”
现在它应该是这样的。

#image2 {
  width: 25%;
  position: absolute;
  right: 75%;
 }

希望能有所帮助。

- ggcodes