html - 并排放置多个部分

Question

我正在尝试制作一个具有多个并排放置的部分的网站，然后用户有两个用于左右滚动的按钮。所有部分的宽度和高度都必须为 100%，这样内容才能全屏显示。

我设法定位了两个部分，但问题是我必须继续添加越来越多的部分，所有这些部分都应该出现在最后一个部分的右侧。

我认为我的方法有误，所以我需要你的帮助。

<div class="wrap">
    <section class="first">
        <section class="section">
            <img src="image1.jpg">
        </section>

        <section class="section">
            <img src="image2.jpg">
        </section>
    </section>

    <section class="second">
        <section class="section1">
            <img src="image3.jpg">
        </section>
    </section>
        ... the rest of sections
</div>

//css

.wrap{
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto; 
}

.first{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }

.second{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
}

.section{
    background-color: black;
    float: left;
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

.section img{
    width: 100%;
    height: 100%;
}

.section1{
    background-color: black;
    float: left;
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

.section1 img{
    width: 100%;
    height: 100%;
}

所以这是某种作品集网站，每个主要部分代表一个元素，在元素内部我必须全屏显示图像。

我希望你能理解我。

Answer 1

我不确定这是你想要的，但我已经设法让 4 个并排。

检查这个 fiddle 作为例子:http://jsfiddle.net/vBPyL/

添加 left: 100%, left: 200%, left: 300% 等似乎可以解决问题

.fourth{
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0;
    left: 300%;  
    display: table-cell;
}

它可以回到 IE9，但当然，IE8 不支持 html5 标签，我离题了。

希望对你有帮助