我很困惑为什么这不起作用。我试图在div.queue-wrapper
内部实现水平滚动,所以div.queue-month
如果空间不够就不要一个接一个往下掉(这就是他们目前所做的)。
HTML
<div class="queue-container">
<div class="queue-wrapper clearfix">
<div class="queue-month">
1
</div>
<div class="queue-month">
2
</div>
<div class="queue-month">
3
</div>
</div>
</div> <!-- .queue-container -->
CSS
.queue-container {
height: 260px;
width: 100%;
background-color: grey;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}
.queue-wrapper {
overflow-x: scroll;
background: yellow;
width: 100%;
}
.queue-month {
width: 385px;
float: left;
background-color: orange;
}
jsfiddle例子
我正在使用 bootstrap 3,但由于它在 fiddle 中不起作用,我认为它与问题无关。
最佳答案
你可以使用 white-space 来 nowrap 并使用 inline-block display 而不是 float:
.queue-container {
height: 260px;
width: 100%;
background-color: grey;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}
.queue-wrapper {
overflow-x: auto;/*changed from scroll*/
background: yellow;
width: 100%;
white-space: nowrap;/*using nowrap*/
}
.queue-month {
width: 385px;
display: inline-block;/*instead of float:left;*/
background-color: orange;
}
<!-- Dragable queue section -->
<div class="queue-container">
<div class="queue-wrapper clearfix">
<div class="queue-month">
1
</div>
<div class="queue-month">
2
</div>
<div class="queue-month">
3
</div>
</div>
</div> <!-- .queue-container -->
关于html - 溢出-x : scroll doesn't seem to work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31111663/