我想将许多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才能获得此结果,则更好:

javascript - 将div元素垂直填充到父div内容中-LMLPHP

我尝试使用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/

10-05 20:43
查看更多