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

我有以下标记：

<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>​

​

问题

---

标题的垂直位置应该相等，但“右”在“左”上方为

1em

。为什么？如何解决这个问题？

将

float left

类添加到右侧

div

将

float:left

添加到

.twcol

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

---

在twocol类上添加列的宽度（宽度：50%）和相对位置（位置：相对；浮动：左；）

---

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

这里的问题是由于边距塌陷。默认情况下，主体上有一些空白。当两个边距相交时，浏览器将选择两个边距中较大的边距并应用它。当浮动一列时，这会中断塌陷的边距，并应用两个边距

我在你的小提琴上加了一些背景色来说明这一点。

要了解有关折叠页边距的详细信息，请执行以下操作： 通过添加

border : 1px solid transparent;

对于

.twocols

，一切都会好起来的。

---

但是，我不明白为什么。

从左到右添加类浮动条

<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>​

左边
首先

第二

第三

正确的
福

酒吧

福巴

​

你能解释为什么浏览器在不将左浮点添加到右div的情况下呈现这样的效果吗？@Alp因为当你将“float”添加到元素时，它会从主流中“落下”，并包裹所有无浮点元素。你能解释为什么浏览器在不将左浮点添加到右div的情况下呈现这样的效果吗？这是因为页边折叠。添加填充也会有同样的效果。@Jerska这应该是对问题的评论，而不是回答——仅供参考。我刚刚读了你写的内容。很好的解释@亚历克斯玛：这可能是一个解决那些想要快速解决问题的方法。但肮脏的解决方案仍然是一个解决方案。@Jrod Good anwswer，所以还有一个问题。W3：“浮动框向左或向右移动，直到其外缘接触包含块边缘或另一个浮动框的外缘。如果有行框，则浮动框的外顶部与当前行框的顶部对齐。”这就是浮动框顶部向下移动的原因吗？

<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>​