html - 脱离 div 的类

Question

有时，即使是最简单的事情也似乎是不可能的……看看这个，如果您明白我没有看到的东西。

>> LINK

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

如果您 float 元素，父元素可能很难确定它们有多大。

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

HTML

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

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

CSS

div.clear { clear: both; }

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