3

画像を含む 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;
}
4

2 に答える 2

0

この方法に慣れている

ライブデモ ---------------------------- デモ-2

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>

ライブデモ

于 2013-02-27T06:27:28.723 に答える
0

私が間違っていない場合は、CSS コードを見てください。

#image2 の「}」を閉じるのを忘れています。
それは今このように見えるに違いありません。

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

それが役に立てば幸い。

于 2013-02-27T06:33:54.833 に答える