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

回答

相关问题