html - 横向网站导航

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 演示。

删除每个块之间的空格

现在我们已经删除了浮动和定位，您会注意到每个分隔线之间有一个空白区域。如果我们参考这篇 CSS 技巧文章，我们可以通过简单地给出 0 的bodya来删除它font-size，并给每个分隔符 afont-size你想要的字体大小在这些块内：

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

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

第二个 JSFiddle 演示。

Answer 2

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

您可以删除绝对定位并改用浮动。

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