0
我有一个父级Div容器,里面有5个div。 父div是960px宽和320px高。内部元素向左浮动并具有设定的宽度。CSS |使div浮动到右侧并向父级添加滚动条
5个项目没有足够的宽度/空间适合960宽的父div,所以自然会使最后一个div浮动到底部。
有没有办法让它向右滑动并添加一个滚动条来水平滚动?
http://puu.sh/qiBKI/3f1d4c944a.png
我有一个父级Div容器,里面有5个div。 父div是960px宽和320px高。内部元素向左浮动并具有设定的宽度。CSS |使div浮动到右侧并向父级添加滚动条
5个项目没有足够的宽度/空间适合960宽的父div,所以自然会使最后一个div浮动到底部。
有没有办法让它向右滑动并添加一个滚动条来水平滚动?
http://puu.sh/qiBKI/3f1d4c944a.png
您可以结合white-space: nowrap
和display: inline-block
,以防止被包装的元素。添加overflow: scroll
父级获得滚动条。这里有一个例子:
.parent {
overflow: scroll;
background-color: lightblue;
white-space: nowrap;
}
.some-child {
width: 200px;
display: inline-block;
}
<div class="parent">
<div class="some-child">Some Text</div>
<div class="some-child">Some Text</div>
<div class="some-child">Some Text</div>
<div class="some-child">Some Text</div>
<div class="some-child">Some Text</div>
<div class="some-child">Some Text</div>
<div class="some-child">Some Text</div>
<div class="some-child">Some Text</div>
</div>
.parent {
width: 100%;
overflow: scroll;
}
添加代码,请 – jakob