將div元素垂直填充到父div內容

我想將多個div元素垂直填充到另一個div元素父節點，就像下面的scatch代碼一樣，但父div應該是水平滾動的，所以我有一個固定的Height母公司股利和寬度應該是自動值，所以我可以填寫以下結果圖像許多元素，如，請參閱圖像將div元素垂直填充到父div內容

比方說，我有這樣的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;

來源

2016-07-19 ManY

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

查看flexbox（假設您不必支持舊瀏覽器）https：// css-tricks。com/snippets/css/a-guide-to-flexbox/ – ADyson

@Paulie_D我試過display：flex; flex-direction：列;但這沒有幫助，我不知道css – ManY

我想用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/

來源

2016-07-19 10:51:21

謝謝，這有幫助，我發現我的問題，這是不好的高度價值，你的答案@Michael_B評論指出我的方向很好，再次感謝！ – ManY

試試這個，

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

希望這會有所幫助。

來源

2016-07-19 10:21:15 Pirate

試試這個

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

來源

2016-07-19 10:25:11

試試這個，把你的子元素另一個DIV中下父div來允許它在scroll即x-axisvertical 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>

來源

2016-07-19 10:48:41 frnt

將div元素垂直填充到父div內容

回答

相關問題