在绝对定位的 div 下定位答案

【问题标题】：Positioning under absolute positioned divs在绝对定位的 div 下定位
【发布时间】：2013-02-27 14:33:54
【问题描述】：

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

【问题讨论】：

为什么绝对是必要的？为什么浮动不是一种选择？
据我了解，浮动不起作用，因为绝对定位的元素已从工作流程中取出。如果有一种方法可以允许 100% 宽度的图像使用浮动调整大小，那会很棒:)

标签： css positioning css-position

【解决方案1】：

习惯了这种方法

Live Demo ---------------------------- Demo-two >

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>

Live Demo

【讨论】：

哇。我弄得太复杂了！只是在本地安装测试
font-size:0 对图片有什么作用？
谢谢。能否推荐一些“高级”定位的学习资料？
欢迎访问此链接，现在了解更多关于职位css-tricks.com/video-screencasts/…
您在线是为了快速工作吗？

【解决方案2】：

如果我没记错的话，看看你的 CSS 代码：

您忘记在 #image2 的结尾加上“}”。
它现在应该是这个样子。

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

希望对你有帮助。

【讨论】：