1

下clear:bothに配置できるようにするために使用しているコードからわかるように、これは追加を妨げているようです。これに対する修正はありますか?#three#one #twomargin-top#three

<div id="one">
</div>
<div id="two">
</div>
<div id="three" class="clearfix">
</div>

#one {
    float:left;
}

#two {
    float:right;
}

.clearfix {
    clear:both;
}

#three {
    margin-top: 20px;
}
4

6 に答える 6

3

使用できる回避策として

padding-top : 20px

または、技術的に使用することもできます

position: relative;
top: 20px;

#threedivに適用されます。あるいは

padding-bottom: 20px;

#twodivに適用されます。さらには

 #two:after {
    content : "";
    clear   : both;
    display : block;
    height  : 20px; // or margin-bottom: 20px;
 }

レイアウトに最適なオプションを選択してください

于 2012-09-27T10:37:34.197 に答える
1

float:left;#three に申請して問題を解決してください

編集:または、ファブリツィオに従って、何もフロートさせたくない場合はパディングを追加しますが、相対位置を使用する必要はありません。

于 2012-09-27T10:37:33.473 に答える
0

このJSFiddleはあなたを助けるはずです

<div class="row">
    <div id="one">
        a
    </div>
    <div id="two">
        b
    </div>
</div>

<div id="three">
    c
</div>

CSS

#one {
    float:left;
}    
#two {
    float:right;
}    
clearfix {
    clear:both;
}
.row{ overflow: hidden; border: 1px solid red; }
#three {
    margin-top: 40px;  border: 1px solid green;
}
于 2012-09-27T10:41:42.867 に答える
0

#one と #two を でコンテナにラップすれoverflow:hidden;ば、clearfix も必要ありません。

デモ

<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>

#container {
    overflow:hidden;
}
#one {
    float:left;
}
#two {
    float:right;
}
#three {
    margin-top: 20px;
}​
于 2012-09-27T10:38:16.593 に答える
0

こんにちは、HTML のコードをいくつか変更して、これを実行してください

<div style='overflow:hidden'>
  <div id="one">Left</div>
  <div id="two">Right</div>
</div>
<div id="three" class="clearfix">// your data </div>

ライブデモ

于 2012-09-27T10:39:25.863 に答える
-1

clear: both;を#threedivに適用する必要があります。

次に、次のようになります: http://jsfiddle.net/uJBK2/

編集 今、クリアフィックスの前にポイントが欠けていることがわかりました。どうでも。

于 2012-09-27T10:36:31.080 に答える