Div高度匹配子div

我一直在試圖隔開我的div，所以他們在頁面上相互插入。我遇到的問題（如圖所示）是我無法將div的高度與它的div子集相同。在這個例子中，我有我的「box1」和2個「子盒子」。子框內有文本，但包含它們的主div沒有任何高度。Div高度匹配子div

這是一個問題，因爲當我嘗試在這個下面添加div時，他們只是插入與頂部相同的位置。

screenshot of issue

如果我的問題是不明確的，請說，我會盡力闡述

這裏是HTML

<div id="aboutus-box1"> 
<div id="aboutus-box1sub1"> 
    <span id="subtitle">What is this site all about</span><br/> 
    Information and details about the site, point put forwards to new users to look to the help page for support and to look at the <a id="textlink">site rules</a> TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------ 
</div> 
<div id="aboutus-box1sub2"> 
    <span id="subtitle">Our History</span><br/> 
    How the group came about, where different members came from, how the idea came about TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------ 
</div></div>

的快速片段和一些CSS

#aboutus-box1{ 
    width:100%; 
    margin-bottom:1%; 
    margin-top:1%; 
    } 
#aboutus-box1sub1{ 
    height:100%; 
    width:49.5%; 
    float:left; 
    } 
#aboutus-box1sub2{ 
    height:100%; 
    width:49.5%; 
    float:right; 
    margin-left:1% 
    }

這是JSFiddle Demo

來源

2014-01-07 Shard

父（＃關於我們-BOX1）需要另一種風格：overflow: hidden;

來源

2014-01-07 16:00:14

您需要清除浮標才能恢復佈局。

有很多方法可以做到這一點，最簡單的方法是在最後一個浮動元素之後清除div。

<div class='clear'></div>

CSS：

.clear { 
    clear:both; 
}

來源

2014-01-07 16:00:02

由於您使用float你還需要使用clear屬性使父保存height。

#aboutus-box1:after{ 
    content:" "; 
    display:block; 
    clear:both; 
}

你可以在這裏查看More About Floats等方式來使用clear屬性。

你Fiddle demo

來源

2014-01-07 16:00:10 DaniP

你能解釋爲什麼所有這些性能的需要？爲什麼不與布賴恩建議使用溢出：隱藏; ？ – Shard

這些屬性需要放置一個'：after clear'元素...爲什麼不用'overflow：hidden'就是選擇我不喜歡這樣做，因爲溢出並不是清除浮動的完全屬性，並且可能會導致其他內容出現問題。但可以在我鏈接的文章中進行更多解釋。 – DaniP

感謝您的幫助，與溢出：隱藏。欣賞你的時間 – Shard

Div高度匹配子div

回答

相關問題