1

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

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没有自动高度！

例如，如果我想要另一个section在这个之后立即带有浮动，我不能在两个sections 之间应用边距。

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

看我的例子：http: //jsfiddle.net/kWtev/

感谢您的提示和技巧，我很感激。

4

5 回答 5

2

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

互联网上有几种清算技术 ，最常见的一种是在容器上使用。清除浮动的“神奇”副作用之一。 overflow: hiddenoverflow: hidden

.cols-2 { overflow: hidden; }

jsFiddle 演示

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

.cols-2 { clear: left; }

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

于 2012-05-11T13:56:44.353 回答
1

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

于 2012-05-11T14:01:14.487 回答
1

最好的解决方案是对父容器使用“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 文件的最后。

只需添加一个类，您就完成了！

于 2012-05-11T14:17:16.503 回答
0

你能检查一下这个DEMO吗，它可能对你有帮助

.cols-2 {
    margin:20px 0;
    overflow:auto;    
}
于 2012-05-11T14:04:14.827 回答
-1

你有没有想过使用：

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

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

如果您期望的行为允许这样做...

例子

于 2012-05-12T00:02:58.263 回答