1

マージンのある非常に苛立たしい状況にあります。マークアップの上部に右に浮かぶdivがあります。

 .grey{
   float:right; 
   width:200px; 
 }

後の最初の段落にいくつかのスタイル（背景とマージン）を適用する必要があります。

 .blue{
    background-color: blue; 
    margin: 10px;
    overflow:hidden;
 }

ここで、「オーバーフロー：非表示」という段落を作成して、フロートされたdivの下に背景が拡張されないようにする必要がありますが、2つの奇妙な問題があります。

  1. 余白は、フロートに接する段落の側には適用されないようです。

  2. マージンは、その横にあるフロート要素に適用されるようです。

これがフィドルです。 http://jsfiddle.net/whiteatom/Nkfzg/6/

「青」要素とフロート要素の間のマージンスペースを取得する方法を教えてもらえますか？そして、誰かが私のフロート要素にこれらのファントムマージンを持たないようにする方法を教えてもらえますか？

乾杯、

ホワイトアトム

4

2 に答える 2

1

フローティング要素を段落から離すために、左マージンを適用する必要があります。

.grey {
    float: right; 
    width: 200px; 
    margin-left: 10px;
}

前述のように、余白を折りたたむと、段落の上部余白が代わりにページ本文に影響します。これにより、段落とフローティング要素の両方が押し下げられます。

フローティング要素から上マージンを削除するには、2つのオプションがあります（1つだけ選択してください）。

  • ボディを浮かせてマージンの崩壊をキャンセルします。

    body {
    float: left;
}

    これにより、マージンは段落にのみ影響します。更新されたフィドル

  • フローティング要素に負の上部マージンを適用します。

    .grey {
    float: right; 
    width: 200px; 
    margin-left: 10px;
    margin-top: -10px;
}

    ここでは、有効なままであるマージンの崩壊に対抗するために、フローティング要素を上にシフトしています。更新されたフィドル

于 2012-12-25T07:04:16.607 に答える
0

.greydivの幅が常に200pxになる場合は、.bluedivのマージンをに変更するだけwidth + 10pxです。そのようです：

.blue {
    border: 1px solid red;
    background-color: blue;
    margin: 10px 210px 10px 10px;
};

これが更新されたフィドルです。

于 2012-12-24T18:48:52.253 に答える