Question

这是我这个古老的问题，我从来没有找到真正的解决方案，所以我终于只是寻求帮助。

HTML

<section class="cols-2">
        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>

        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>
</section>
<section …

CSS

.cols-2 .wrapper {
        margin:0;
        float: left;
        width: 50%;
    }

所以我有两列在section.cols-2内浮动。在这种情况下，section没有自动高度！

e.g。如果我希望另一个section在此之后立即显示平局，我无法在两个section之间应用保证金。

我不想应用height值，我只需要两个section彼此分开一个特定的边距。

请参阅我的示例：http://jsfiddle.net/kWtev/

感谢您的窍门和技巧，我很感激。

Answer 1

你需要清除浮子。这不仅是你古老的“问题”，而是每个网站建设者的问题。但幸运的是，古老的问题有着古老的解决方案。

有several clearing techniques available on the Internet，其中一种最常见的是在容器上使用overflow: hidden。其中一个"magic" side effects of overflow: hidden正在清除花车。

.cols-2 { overflow: hidden; }

jsFiddle Demo

当然你可以简单地使用clear: left，容器之间会有空格，但最后一个仍然没有非零高度。

.cols-2 { clear: left; }

一些清除技术通过插入另一个已应用clear: left的元素（如空div或伪元素）来解决此问题。

Answer 2

.cols-2 { overflow: auto; }将解决由浮动元素引起的问题。

Answer 3

最好的解决方案是使用'clearfix'作为父容器。

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

<section class="cols-2 clearfix">
        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>

        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>
</section>

您可以对任何已浮动元素的容器使用clearfix。您需要将clearfix css放在css文件的最末尾。

只需添加一个课程即可完成！

Answer 4

您可以查看DEMO，这可能会对您有所帮助

.cols-2 {
    margin:20px 0;
    overflow:auto;    
}

Answer 5

您有没有想过使用：

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid black;
-webkit-column-gap: 20px;

当然-webkit-前缀必须替换为其他前缀才能更大程度地兼容......

如果你期望的行为允许这个......

Example

CSS：如何将边距应用于具有浮动的容器？

5 个答案: