横向网站导航

Question

我目前正在筹划一个需要水平滚动的网站。

我必须解决这个问题的最简单方法是朝着这个方向前进，JSFiddle。

我不确定这是否是最佳选择，因为我必须单独安排每个div，即left: 100% left: 200%;。

是否有一种绕过div的方法，display: inline-block值自动换行到视口，所以我不必单独排列每个div？

Answer 1

删除绝对定位

您需要执行的操作是从分频器中删除float和绝对定位，只需将white-space: nowrap添加到body即可。由于您的分隔符设置为inline-block，因此会受到white-space属性的影响。

body {
    margin: 0;  padding: 0;
    white-space: nowrap;
}

.full {
    width: 100%;
    height: 100%;
    display: inline-block;
}

<强> JSFiddle demo

删除每个块之间的空格

现在我们已经移除了浮子和定位，你会注意到每个分隔器之间有一个空白区域。如果我们引用this CSS Tricks article，我们可以通过简单地将body一个font-size设为0，并为每个分隔符font-size提供您想要的字体来删除它大小在这些区块内：

body {
    margin: 0;  padding: 0;
    white-space: nowrap;
    font-size:0;
}

.full {
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size:16px;
}

Second JSFiddle demo

Answer 2

http://jsfiddle.net/MsRCS/3/

您可以删除绝对定位并改为使用float。

body {
    margin: 0;  padding: 0;
    width:300%;
}

.full {
    width: 33.3%;
    height: 100%;
    display: inline-block;
    float: left;

}

#screen-1 {
    background: red;    
}

#screen-2 {
    background: blue;
}

#screen-3 {
    background: yellow;
}