我希望我的图块位于同一行，并且如果图块超出容器的宽度，容器可以水平滚动。看下面的演示，图块被添加到下一行，所以我必须垂直滚动才能访问它们。如何使水平滚动起作用，并使所有图块保持在同一行？
.container {
width: 600px;
max-height: 140px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
}
.tile {
width: 200px;
height: 92px;
float: left;
margin: 10px 10px 50px 10px;
background: cornflowerblue;
}
<div class="container">
<div><img class="tile"></div>
<div><img class="tile"></div>
<div><img class="tile"></div>
</div>
你需要设置overflow-x:scroll; and overflow-y: hidden;在父母身上，以及white-space:nowrap;在内部 div 上以及display: inline-block; on floatLeft
.container {
width: 480px;
height: 140px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: hidden;
}
.inner {
height: 100%;
white-space:nowrap;
}
.floatLeft {
width: 200px;
height: 92px;
margin:10px 10px 50px 10px;
display: inline-block;
}
img {
height: 100%;
}
<div class="container">
<div class="inner">
<div class="floatLeft">
<img src="http://placehold.it/350x150" class="tile">
</div>
<div class="floatLeft">
<img src="http://placehold.it/350x150" class="tile">
</div>
<div class="floatLeft">
<img src="http://placehold.it/350x150" class="tile">
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
