css元素水平排列,水平方向溢出

Question

想试下做出fullpage.js的效果
但是每个区块不是正常的垂直排列,而是水平的排列
动画效果倒是不难实现
反而是让元素在水平方向上排列想爆了头
虽然最终还是实现了
但是我是把每个区块元素的css属性写成
#header, #body, #footer{position: absolute; height: 100%; width: 100%;}
#header{left: 0;}
#body{left: 100%;}
#footer{left: 200%;}
最终才近似地实现了水平方向排列的效果
毕竟这个是靠绝对定位完成的
我是想有没有其他方法可以令元素水平方向排列,而超出父元素内容后又向水平方向溢出呢?

这只是突然蹦出来的一个想法
当展示的内容超过当前窗口所能容纳的内容时
所有浏览器的默认行为都是给出垂直方向的滚动条
也就是说超出的内容会叠加到内容的下方
那么应该也能水平方向展示内容吧
而且这是布局问题
所以我想能不能用纯css实现

Answer 1

see是我们能看到的地方，超出的部分隐藏。然后main就是放section的地方。因为section有两个，所以main就是200%了，这样里面的section每个就是main的50%，就是see的100%。

但是如果动态的往main里加东西，不用js，我真没思路了。

<div id="see">
    <div id="main">
        <div class="section1">
            1
        </div>
        <div class="section2">
            2
        </div>
    </div>
</div>

#see {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#main {
    height: 100%;
    width: 200%;
}

.section1 {
    height: 100%;
    width: 50%;
    float: left;
    background: red;
}

.section2 {
    height: 100%;
    width: 50%;
    float: left;
    background: red;
}