0

たとえば、さまざまな画像を使用してレスポンシブ デザインを作成したいと考えています。

 <div id="home" class="page"> 
    <div id="home_1" class="section"><!-- Page 1 -->
        <div id="home_1_1" class="full">
            <img src="images/home/home_1/home_1.png" class="full-image"></img>
        </div>
    </div>
    <div id="home_2" class="section"><!-- Page 2 -->
        <div id="home_2_1" class="full">
            <img src="images/home/home_2/home_2_block1.png" class="full-image"></img>
        </div>
        <div id="home_2_2" class="full">
             <img src="images/home/home_2/home_2_block2.png" class="full-image"></img>
        </div>
    </div>
    <div id="home_3" class="section"><!-- Page 3 -->
        <div id="home_3_1" class="full">
            <img src="images/home/home_3/home_3_block1.png" class="full-image"></img>
        </div>
        <div id="home_3_2" class="full">
            <img src="images/home/home_3/home_3_block2.png" class="full-image"></img>
        </div>
    </div>
</div>

home_1、home_2およびhome_3は個別の画像ブロックです。しかしhome_2_1 home_2_2、同じトップの位置を持つ必要があり、それらも下にある必要がありますhome_1。

これは私のcssです：

#home{
    width: 100%;
    text-wrap: none;
    white-space: nowrap;
}
.section{
    position: relative;
    display: inline-block;
    width: 100%;
}

.full{
    position: absolute;
    top:0;
    left:0;
}
.full-image{
   width: 100%;
    display: block;
}

問題は、1 つの画像しか表示されず、他の画像が隣同士に浮かんでいないことです。誰かがこれで私を助けてくれることを願っています。

4

1 に答える 1

0

何を言っているのかよくわかりませんが、フロートだけを使ってみましたか?

このフィドルを確認してください：http://jsfiddle.net/9Ryby/

.section {
    clear: both;
}
.full-image {
    width: 50%;
    float: left;
}
于 2013-08-11T10:15:52.490 に答える