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

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

检查这个小提琴：http: //jsfiddle.net/9Ryby/

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