css - 在绝对定位的 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;
}

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>

现场演示

Answer 2

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

你忘了把你的 #image2 关闭“}”。
它现在必须看起来像这样。

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

希望能帮助到你。