将div元素垂直填充到父div内容中
[英]fill div elements vertically into a parent div content
问题描述
我想将许多div元素垂直填充到另一个div元素，即父节点中，如下面的scatch代码中所示，但是父div应该可以水平滚动，因此我有固定的父div高度，宽度应该是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;
4 个解决方案
解决方案1
0 2016-07-19 10:21:15
尝试这个，
#element1,#element2,#element3,#element4,#element5,#elementN{ display:inline; width:50px; height:50px; margin-left:30px; margin-top:30px; position:relative; border:solid 2px red; }
<html> <body><div id="content" style="width:600px; height:300px; position:fixed; overflow:hidden; border:solid 2px red;"> <br> <div id="element1" style="width:50px;" > ... </div> <div id="element2" > ... </div> <div id="element3"> ... </div> <div id="element4"> ... </div> <div id="element5"> ... </div> .... <div id="element_N"> ... </div> </div> </body> </html>
希望这会有所帮助。
解决方案2
0 2016-07-19 10:25:11
尝试这个
<div id="content" style="width:100px;overflow-x: scroll;display: inline-flex;"> <div id="element1" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 1 </div> <div id="element2" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 2 </div> <div id="element3" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 3 </div> <div id="element4" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 4 </div> <div id="element5" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 5 </div> <div id="element_N" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 6 </div> </div>
解决方案3
0 2016-07-19 10:48:41
尝试此操作，将子元素放置在父div下的另一个div中，以使其在x-axis scroll ，即vertical scrolling 。
#container{ width:800px; height:250px; overflow-x:scroll; overflow-y:hidden; } .con1{ width:1200px; height:250px; } .box1,.box2,.box3,.box4,.box5,.box6{ width:200px; height:200px; margin:20px; background:#111; float:left; }
<div id="container"> <div class ="con1"> <div class ="box1"></div> <div class ="box2"></div> <div class ="box3"></div> <div class ="box4"></div> <div class ="box5"></div> <div class ="box6"></div> </div> </div>
解决方案4
0 已采纳 2016-07-19 10:51:21
我认为在这种情况下使用flexbox会更容易。 由于您具有固定的高度内容，因此如果我们指定flex-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/
Div不覆盖其中的内容（垂直）div内没有浮动
[英]Div is not covering the content in it (vertically) no floats inside of div
如何使用父div上角的复选框将div垂直和水平居中
[英]How to center a div vertically and horizontally with a checkbox on the top corner of parent div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.