我了解如何使用全部位于单行上的元素进行简单的水平滚动。
单行演示:http://jsfiddle.net/YbrX3/1504/
尽管我如何使用 CSS 实现多行元素滚动,如下所示:
1 | 3 | 5 | 7 | 9
---------------------------
2 | 4 | 6 | 8 | 10
最佳答案
这是一个使用 flexbox
的解决方案 - 将此样式添加到 scrolls
:
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 160px;
我将 scrolls
的高度加倍,并给它一个 column
flex-direction。包装它可以获得您需要的布局。
请看下面的片段:
.wrapper {
background: #EFEFEF;
box-shadow: 1px 1px 10px #999;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 100%;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 160px;
white-space: nowrap
}
.scrolls div {
padding: 20px;
box-shadow: 1px 1px 10px #999;
margin: 2px;
display: inline-block;
vertical-align: top;
}
<div class="wrapper">
<div class="scrolls">
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
<div>
7
</div>
<div>
8
</div>
<div>
9
</div>
<div>
10
</div>
<div>
11
</div>
<div>
12
</div>
<div>
13
</div>
<div>
14
</div>
</div>
</div>
让我知道您对此的反馈。谢谢!
关于html - 如何拥有多行 CSS 水平滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39886104/