我有一个带有几个子div的div,它们向左浮动。我不希望它们中断,所以我将它们设置为display:inline-block
和white-space:nowrap
。遗憾的是没有任何事情发生他们只是一直在破碎。
最后我想在x方向滚动,但是当我添加overflow-x:scroll; overflow-y:visible
时,它会向y方向滚动。
.a {
width: 400px;
height: 300px;
white-space: nowrap;
display: inline-block;
}
.b {
float: left;
width: 50px;
height: 200px;
display: inline-block;
}
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="clearfix"></div>
</div>
答案 0 :(得分:9)
我可能无法完全理解您的问题,但如果您从float: left;
删除.b
并将overflow:auto;
添加到.a
答案 1 :(得分:2)
不确定你的意思,但如果你停止淹没你的b,并给你一个溢出:自动它应该工作
见:/jsfiddle.net/88yjz/3 /
答案 2 :(得分:0)
这会给你你想要的吗?添加了溢出滚动。
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #EEEEEE;
}
.a {
width: 400px;
height: 300px;
white-space: nowrap;
overflow:scroll; /* Added this line*/
background-color: lightcoral;
-webkit-box-sizing:border-box;
}
.b {
width: 50px;
height: 200px;
margin-top: 50px;
margin-left: 15px;
display: inline-block;
background-color: lightgreen;
-webkit-box-sizing:border-box;
}
.clearfix {
float: none;
clear: both;
}