4

私は次のマークアップを持っています：

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

<ahref = "http://jsfiddle.net/Hu5ZH/" rel ="nofollownoreferrer">デモ

問題

見出しの垂直位置は同じである必要がありますが、「右」は1 em「左」の上にあります。なんで？そして、これを修正する方法は？

4

6 に答える 6

7

ここでの問題は、マージンの崩壊によるものです。デフォルトでは、ボディにある程度のマージンがあります。2つのマージンが一致すると、ブラウザは2つのうち大きい方を選択し、それを適用します。1つの列をフロートさせると、折りたたみマージンが中断され、両方のマージンが適用されます。

これを説明するために、フィドルにいくつかの背景色を追加しました。 http://jsfiddle.net/Hu5ZH/2/

マージンの折りたたみの詳細については、 http ：//www.w3.org/TR/CSS2/box.html#collapsing-marginsをご覧ください。

于 2012-07-31T16:08:39.890 に答える
0

クラスfloatを追加-左から右のバー

<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

列の幅（width：50％）と、float left（position：relative; float：left;）で相対配置された相対位置をtwocolクラスに追加します。

また、「clearfix」メソッドを使用して2つのフローティング要素をクリアすることもできます。

于 2012-07-31T16:07:44.617 に答える
-1

追加することにより

border : 1px solid transparent;

に.twocols、すべてがうまくいくでしょう。
しかし、その理由がわかりません。

于 2012-07-31T16:10:43.390 に答える