html - 相对div中的绝对位置图像

Question

我想用不同的图像做一个响应式设计，例如:

 <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 是单独的图像 block 。但是 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;
}

问题是我只看到一张图片，其他图片并没有漂浮在彼此旁边。我希望有人可以帮助我。

Answer 1

我不太清楚你的意思，但你试过只使用 float 吗？

检查这个 fiddle :http://jsfiddle.net/9Ryby/

.section {
    clear: both;
}
.full-image {
    width: 50%;
    float: left;
}