4

I have following markup:

<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;
}

​<a href="http://jsfiddle.net/Hu5ZH/" rel="nofollow noreferrer">DEMO

Problem

The headlines' vertical position should be equal, but "right" is 1 em above "left". Why? And how to fix this?

4

6 回答 6

7

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

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

要了解有关折叠边距的更多信息：http: //www.w3.org/TR/CSS2/box.html#collapsing-margins

于 2012-07-31T16:08:39.890 回答
0

添加类浮动从左到右栏

<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>​
于 2012-07-31T16:12:29.180 回答
0

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

于 2012-07-31T16:06:35.503 回答
0

给float:left_.twcol

   .twocol 
       {
        margin-right: 1em;
        float:left;
       }
于 2012-07-31T16:06:52.367 回答
0

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

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

于 2012-07-31T16:07:44.617 回答
-1

通过添加

border : 1px solid transparent;

到.twocols，一切都会好起来的。
但是，我不知道为什么。

于 2012-07-31T16:10:43.390 回答