从div中掉出来的课程

Question

有时甚至最简单的事情看起来都是不可能的......如果你看到我不知道的话,看看这个.

>>链接

一个div(绿色),使用类分为L和R两侧.

出于某种原因,类"left-content,right-content"不希望留在"examples"div中.

#examples 
{
width:100%;
margin-bottom:45%;
padding-top:10%;
height:auto;
border-top: dashed #CCC 1px;
background-color:#0FC
}




.resize 
{
width:100%; 
height:auto; 
border: solid #CCC 1px;
}

.left-content
{
float:left;
width:60%;
}

.right-content
{
float:right;
width:30%;
padding-left:5%;
}

.title
{
margin-top:0px;
font-family: 'PT Sans Narrow', Arial, sans-serif; font-size: 1.00em; font-weight:300;     letter-spacing: 0.1em; color:#F63
}   

.content
{
font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.80em; font-weight:300; color:#444; text-justify:newspaper
}

.goto, .goto a, .goto a:hover, .goto a:visited
{
margin-top:-5px; font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.95em; font-weight:300; color:#09F; text-decoration:none; letter-spacing: 0.1em;
}   

Answer 1

如果浮动元素,父元素可能很难找到它们的大小.

我们通常使用所谓的"clearfix"来解决这个问题.它是您在浮动元素之后附加到DOM的额外元素.这些将允许您的父元素查找内部内容的大小.

HTML

<div class="left"></div>
<div class="right"></div>

<div class="clear"></div>

CSS

div.clear { clear: both; }

还有其他方法可以通过clear: both在父级上设置属性或设置高度来解决此问题.但我通常使用它,它对我来说非常好;)