Question

我正在尝试并排创建两个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>

Answer 1

快速而肮脏的解决方案是通过添加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>

Here is the source for this clearfix solution.

在容器中并排划分

1 个答案: