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

我不确定这是你所追求的，但我已经设法让彼此相邻。

检查这个小提琴例如：http://jsfiddle.net/vBPyL/

添加左：100％，左：200％，左：300％等似乎可以解决问题

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

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

希望这有帮助

并排放置多个部分

1 个答案: