CSS：包含分區的div

的高度我有一個非常簡單的div，含有部分懸空的div：CSS：包含分區的div

<div id="group1" style="padding: 10px"> 
    <div style="width: 180px; float: left">...</div> 
    <div style="width: 180px; float: left">...</div> 
    <div style="width: 180px; float: left">...</div> 
    <div style="width: 180px; float: left">...</div> 
</div>

現在我有一個關於組1的高度一些問題。基本上填充底部不起作用，因爲group1的高度不是動態的。在開發工具中，它顯示的總是21px。取決於瀏覽器窗口的大小，內部div需要更多空間。我嘗試了一些高度組合：自動和最小高度，但沒有任何工作。

我真的要根據瀏覽器窗口大小來計算高度嗎？應該有更方便的東西！

任何幫助，非常感謝！由於

來源

2017-04-18 Michael

可能的重複[當子div被漂浮，父母divs失去自動高度]（http://stackoverflow.com/questions/5010227/when-child-divs-are-floated-parent-divs-lose - 自動身高） –

<div id="group1" style="padding: 10px; width:100%; float:left;"> 
 
    <div style="width: 180px; float: left">hello</div> 
 
    <div style="width: 180px; float: left">hello</div> 
 
    <div style="width: 180px; float: left">hello</div> 
 
    <div style="width: 180px; float: left">hello</div> 
 
</div>

來源

2017-04-18 08:44:08 LKG

做到了。我永遠不會理解CSS，但我確定愛上了stackoverflow和這個社區！感謝幫助。將這個答案標記爲解決方案。 – Michael

也許你可以添加幾句話，爲什麼它的作品，你已經添加了什麼...... –

@Michael你可以閱讀關於這個https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context它將幫助你處理浮動和理解爲什麼以及發生了什麼:) –

我已經相應改變你的代碼，並添加了一些必需的屬性請參考下面的代碼片段。

<div id="group1" style="padding: 10px; border:1px solid; overflow:hidden;"> 
 
     <div style="width: 180px; border:1px solid; float: left;">...</div> 
 
     <div style="width: 180px; border:1px solid; float: left;">...</div> 
 
     <div style="width: 180px; border:1px solid; float: left;">...</div> 
 
     <div style="width: 180px; border:1px solid; float: left;">...</div> 
 
    </div>

來源

2017-04-18 08:48:18 Chirag

OP沒有錯過的強制分號。你剛剛添加了一些可選的。 – Sirko

@Sirko我只是建議在每個屬性之後放置分號是一種很好的做法。 :) – Chirag

問題是浮動式內的元件。 @LokeshGupta發佈了一個解決方案。但另一種，如果你不想浮動父，就是用明確的塊：

<div id="group1" style="padding: 10px"> 
    <div style="width: 180px; float: left">...</div> 
    <div style="width: 180px; float: left">...</div> 
    <div style="width: 180px; float: left">...</div> 
    <div style="width: 180px; float: left">...</div> 
    <div style="clear: both;"></div> 
</div>

來源

2017-04-18 08:50:02

您還可以使用：

<div id="group1" style="padding: 10px; width:100%; display:table;"> 
    <div style="width: 180px; float: left">hello</div> 
    <div style="width: 180px; float: left">hello</div> 
    <div style="width: 180px; float: left">hello</div> 
    <div style="width: 180px; float: left">hello</div> 
</div>

來源

2017-04-18 08:50:59 Manuel

會很高興有一些關於顯示效果的解釋:)像https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context –

當一個元素使用屬性float它不影響大小的父母，它只是漂浮在那裏，即使內聯元素也會影響父母。

因此，無論何時使用此類div，都必須清除浮動上下文。

有幾種方法來實現這一目標：

div的使用與clear: both;父內浮動元素後
添加overflow: hidden;父元素
添加float自己的父母，但是這可能在創設問題高層次元素的高度。

來源

2017-04-18 08:54:12 demonofthemist

CSS：包含分區的div

回答

相關問題