Question

我有一个包含其他几个div的div，设置为float：left。现在我想要一个围绕所有这些的框架，所以我在父div上放了一个边框，但浮动的那些“流出”框架......

CSS：

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
}
.column {
    float:left;
    padding-left:10pt;
}

HTML：

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>
</div>

我可以做什么（在CSS中）将它们保存在父框架内？

Answer 1

将overflow: hidden添加到您的父<div> - http://jsfiddle.net/5AVA8/

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
}

Answer 2

你没有清理花车。如果您将代码更改为此，它将解决您的问题。

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
}
.column {
    float:left;
    padding-left:10pt;
}

.clear {
     clear: both;   
}

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>

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

请参阅我在此处设置的示例 - http://jsfiddle.net/spacebeers/RQNDr/

有关clear属性的更多信息 - http://css.maxdesign.com.au/floatutorial/

Answer 3

你必须'清除浮动'，有各种“浮动清除”方法。有些解决方案只涉及CSS，我首选的解决方案（有些人不喜欢，因为它增加了额外的标记）是添加'清除div'，它的工作原理如下：

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>
    <div style="clear:both"></div>
</div>

见最后一行的第二行。

如何在父div的框架内保持浮动div？

3 个答案: