我想将许多div元素垂直填充到另一个div元素,即父节点中,如下面的scatch代码中所示,但是父div应该可以水平滚动,所以我有一个固定的父div高度,而Width应该是Auto值,所以我可以像下面的结果图中那样填充许多元素,请参见该图
假设我有以下HTML代码:
<div id="content" style="width:600px; height:300px;">
<div id="element1" style="height:25px; width:50px;"> ... </div>
<div id="element2" style="height:25px; width:50px;"> ... </div>
<div id="element3" style="height:25px; width:50px;"> ... </div>
<div id="element4" style="height:25px; width:50px;"> ... </div>
<div id="element5" style="height:25px; width:50px;"> ... </div>
....
<div id="element_N" style="height:25px; width:50px;"> ... </div>
</div>
我应该使用哪种CSS或Javascript,但如果只有CSS才能获得此结果,则更好:
我尝试使用CSS:
display: flex;
flex-direction: column;
最佳答案
我认为在这种情况下使用flexbox会更容易。由于您具有固定的高度内容,因此如果我们指定flex-wrap:wrap ;,则flex项将自动换行。
我们还需要说一下overflow-x:auto来进行水平滚动。您可以从下面检查我的CSS:
#content{
display:flex;
flex-direction:column;
flex-wrap: wrap;
overflow-x: auto;
width:150px;
height:100px
}
<div id="content">
<div id="element1" style="height:25px; width:50px;">1 </div>
<div id="element2" style="height:25px; width:50px;">2 </div>
<div id="element3" style="height:25px; width:50px;">3 </div>
<div id="element4" style="height:25px; width:50px;">4 </div>
<div id="element5" style="height:25px; width:50px;">5 </div>
<div id="element5" style="height:25px; width:50px;">6 </div>
<div id="element5" style="height:25px; width:50px;">7 </div>
<div id="element5" style="height:25px; width:50px;">8 </div>
<div id="element5" style="height:25px; width:50px;">9 </div>
<div id="element5" style="height:25px; width:50px;">10 </div>
<div id="element5" style="height:25px; width:50px;">11</div>
<div id="element5" style="height:25px; width:50px;">12</div>
<div id="element5" style="height:25px; width:50px;">13</div>
<div id="element_N" style="height:25px; width:50px;">N </div>
</div>
您也可以检查这个小提琴。
https://jsfiddle.net/beroza/up4ec73x/3/