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;
}

相对div中的绝对位置图像

1 个答案: