1

我正在尝试并排创建两个 div。我试图放入float: left和.holder-left放入float: right，.holder-right但它们漂浮在父持有者和内容 div 之外。

我该如何解决？

CSS

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
}

div.holder > div.holder-left {
    float: left;
}

div.holder > div.holder-right {
    float: right;
}

HTML

<div class="holder">
    <div class="holder-left">
        aufgftf ftftfy
    </div>
    <div class="holder-right">
        afytf fttyfttyty
    </div>
</div>
4

1 回答 1

3

div.holder通过添加overfow属性来修改快速而肮脏的解决方案。这将允许外部 div 正确包裹内部浮动 div。我不记得为什么，但是这个解决方案有些古怪，所以请参阅下面的“clearfix”解决方案。

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
    overflow: hidden;
}

虽然，您应该正确实施“clearfix”解决方案。（这里您不需要使用overflow如上所示的属性。）这是我使用的 clearfix 解决方案的 CSS：

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

* html .group{ zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

然后更改浮动 div 的 HTML，如下所示。您需要做的就是将group类添加到包含浮动元素的 div 中。这将确保浮动 div 完全保持在外部 div 内。

<div class="holder group">
    <div class="holder-left">aufgftf ftftfy</div>
    <div class="holder-right">afytf fttyfttyty</div>
</div>

这是此 clearfix 解决方案的来源。

于 2012-05-18T16:55:25.423 回答