<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
子类的高度为20%,宽度为200px。
我想知道的是,当我有 20 个父 div 时,我想知道如何设置它,以便它们全部水平显示,超出页面宽度,这样我就必须滚动向左或向右查看数据。目前,它填满了页面的宽度,并在第一个父 div 的下方开始了下一个父 div,因此我必须垂直滚动,而且我不知道如何解决这个问题。
提前致谢。
最佳答案
为此,您需要创建一个父容器,然后为其分配一个 overflow-x: scroll
css 规则。您还需要将 display: inline-block
规则分配给您的 parent
类。您还需要应用 white-space: nowrap;。
演示 http://jsfiddle.net/qujyunn4/
.wrapper {
overflow-x: scroll;
white-space: nowrap;
}
.parent {
display: inline-block;
width: 200px;
height: 300px;
border: red solid thin;
margin-right: 5px;
white-space: nowrap;
}
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</div>
关于php - 水平显示超出页面宽度的父div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26088213/