HTMl - 横向滚动实现

横向滚动

虽然大多数网页都是垂直滚动的，但对于以页显示地网站来说，横向滚动翻页(就像word的阅读视图那样)往往也是个不错的选择。如下为几种横向滚动的实现方式，不论哪种方式中，overflow-y: hidden都是必须的，该属性会禁用竖直方向的溢出。笔者才疏学浅，如有问题还望评论指正。

使用flex容器

flex容器详细使用可以参考阮一峰老师的flex教程。实际实现时，设置顶层容器为flex容器，方向为横向。然后对每个子元素设置其最小宽度即可。代码及效果图如下，其中.container为最顶层容器:

.container {
    font-size: 14px;
    width: 700px;
    height: 500px;
    margin: 15px;
    background-color: whitesmoke;
    box-shadow: gray 1px 1px 8px;
    overflow-y: hidden;
    overflow-x: hidden;
}
#targetDiv2{
    display: flex;
    background-color: wheat;
    flex-direction: row;
    height: 95%;
    padding: 5px;
    overflow-y: hidden;
    column-count: 1;
}
p { min-width: 200px; }

虽然flex容器实现了横向滚动，但他要求容器内子元素的宽度固定，否则容器会按照flex的规则排列铺满整个屏幕，而不是溢出到容器外。

使用column

在禁用竖直滚动后，若div元素的column-count属性值大于0，则会自动横向排列所有元素，并且元素的宽度会按照指定的值分割容器宽度。如下为代码及效果:

.container {
    font-size: 14px;
    width: 700px;
    height: 500px;
    margin: 15px;
    background-color: whitesmoke;
    box-shadow: gray 1px 1px 8px;
    overflow-y: hidden;
    overflow-x: hidden;
}
#targetDiv {
    margin: 5px;
    overflow-y: hidden;
    height: 95%;
    background-color: wheat;
    column-count: 1;
}
p { min-width: 200px; }

总结

CSS属性繁多复杂，而且不同浏览器有差异，想要尝试的话可以多看看其它网站的样式。F12查看元素，更改一下体会更深。

P.S. text-align属性中,justify值能够使段落内容两边对齐
P.P.S. text-align-last属性能够设置段落的最后一行的对齐方式，默认值为auto