Question

我想将许多div元素垂直填充到另一个div元素，父节点，如下面的scatch代码，但是父div应该是水平可滚动的，所以我有一个父div的固定高度，Width应该是某个东西自动值，所以我可以填写下面的结果图中的许多元素，请看图像

我们说我有这个HTML代码：

webView.frame = frame;

我应该使用什么CSS或Javascript，但如果只有CSS才能得到这个结果更好：

我尝试使用CSS：

<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>

Answer 1

试试这个，

＆＃13;

#element1,#element2,#element3,#element4,#element5,#elementN{
  display:inline;
  width:50px;
  height:50px;
  margin-left:30px;
  margin-top:30px;
  position:relative;
  border:solid 2px red;
  }

＆＃13;

<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>

＆＃13;

希望这会有所帮助。

Answer 2

试试这个

＆＃13;

<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>

＆＃13;

Answer 3

试试这个，将您的子元素放在父div下的另一个div中，以允许它scroll x-axis，即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>

Answer 4

我认为在这种情况下使用flexbox会更容易。当你有固定的高度内容时，如果我们指定 flex-wrap：wrap; ，flex项将自动换行。

另外我们需要说 overflow-x：auto 来进行水平滚动。你可以从下面查看我的CSS：

＆＃13;

#content{
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;  
  overflow-x: auto;
  width:150px;
  height:100px
}

＆＃13;

<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>

＆＃13;

你也可以检查这个小提琴。 https://jsfiddle.net/beroza/up4ec73x/3/

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

4 个答案: