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属性或设置高度来解决此问题。但我通常使用它，它对我来说效果很好;）

Answer 2

那是因为孩子们漂浮着。在浮动子项下添加带有clear:both的div，或在父框中添加overflow: hidden;。

Answer 3

添加

 overflow: hidden;

到#examples

Answer 4

您的容器div需要clear: both;规则。

还要考虑像这样的clearfix：http://www.webtoolkit.info/css-clearfix.html

Answer 5

#examples 
{
    display:table;
}

Answer 6

从常规流中移除浮动元素。因此，父容器无法计算内容的高度。为了解决这个问题，我们需要清除浮子，这实际上意味着它将被放回流中。

尼古拉斯·加拉格尔（Nicholas Gallagher）做了一个整洁的小修正技巧。基本上，您只需将该类添加到父元素，并且将清除所有包含浮点数。

http://nicolasgallagher.com/micro-clearfix-hack/

 /**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

从div中掉出来的课程

6 个答案: