具有垂直边距的浮动div和标题错误地对齐

Question

我有以下标记：

<div class="twocol float-left">
    <h4>left</h4>
    <p>first</p>
    <p>second</p>
    <p>third</p>
</div>

<div class="twocol">
    <h4>right</h4>
    <p>foo</p>
    <p>bar</p>
    <p>foobar</p>
</div>​

CSS：

.twocol {
    margin-right: 1em;
}

.float-left {
    float: left;
}

h4 {
    margin: 1em 0;
    font-weight: bold;
}

DEMO

问题

标题的垂直位置应相等，但“右”在“左”上方1 em。为什么？以及如何解决这个问题？

Answer 1

这里的问题是由于利润率下降。默认情况下，身体上有一些边距。当两个边距符合浏览器时，选择两者中较大的一个并应用它。当您浮动一列时，这会破坏折叠边距并且正在应用两个边距。

我为你的小提琴添加了一些背景颜色来说明这一点。 http://jsfiddle.net/Hu5ZH/2/

要了解有关折叠边距的详情，请执行以下操作： http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

将float-left课程添加到您的右侧div

Answer 3

将float:left提交给.twcol

   .twocol 
       {
        margin-right: 1em;
        float:left;
       }

Answer 4

在你的twocol类上添加你的列的宽度（宽度：50％）和相对定位的float left（position：relative; float：left;）。

可能还想使用“clearfix”方法清除两个浮动元素。

Answer 5

将类float-left添加到右栏

<div class="twocol float-left">
  <h4>left</h4>
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>

<div class="twocol float-left">
  <h4>right</h4>
  <p>foo</p>
  <p>bar</p>
  <p>foobar</p>
</div>​

Answer 6

添加

border : 1px solid transparent;

到.twocols，一切都会好的 但是，我无法弄清楚原因。