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

用于此方法

Live Demo ---------------------------- {{3} }

<强>的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>

<强> Demo-two

Answer 2

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

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

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

希望它有所帮助。

在绝对定位的div下定位

2 个答案: