1

段落、リスト、および右浮動のdivを含むdivがあります。

親divにはtext-align：justify;があります。財産。

私はpに20pxの（全体的な）マージンを与えていますが、奇妙な理由で、段落の右側でマージンが無視されます。私はulでそれを試しました、そして同じことが起こります。

親div内のテキストを正当化しない場合、マージンは無視されません。（しかし、私はそれを正当化したいと思います）。

フロートdivにはマージン：0があります。ですから、これはマージンの崩壊の問題ではないと思います。

フロートdivは固定次元（ピクセル）divであり、背景画像を除いて空です。

また、margin-right：20pxでマージンを指定しようとしました。そしてそれは機能しませんでした...

フロートdivに左マージンを追加するだけで解決できることはわかっています。しかし、私は何が起こっているのか知りたいです。

これが私が使用しているコードです（私はクラス名のみを編集しました）。

CSS：

.parentDiv {
    position: absolute;
    width: 660px;
    height: 350px;
    z-index: -1;
    background-color:#4F4F4F;
    color:#FFFFFF;
    text-align:justify;
    overflow:hidden;
}

.foatedDiv {
    float:right;
    height:100%;
    margin:0;

}

.parentDiv p {
        margin:20px;
}

HTML：

<div class="parentDiv">
 <div class="floatedDiv" style="width:234px;background-image:url(images/jp01.jpg)"></div>

  <strong><a href="someAnchor">Anchor</a></strong>

  <p>Sope paragraph that I cannot understand why ignores its right margin and is driving me crazy.</p>

  <strong>Some Topic</strong>

  <ul>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
  </ul>
</div>

そして、これは私が得るものです：

ここにいくつかの素敵な代替テキスト

4

3 に答える 3

3

右側の画像が右側に浮いているからです。それはあなたのマージンを適用している、あなたはただ言うことができない。その段落は実際にはその画像の右端まで展開されますが、コンテンツボックスだけは展開されません。右マージンは、画像から20ピクセルインデントするために、その画像の幅に20ピクセルを加えたものである必要があります。

マージンは実際にはどのように見えますか：

例

フロート要素がコンテンツを左にプッシュしている間、実際の物理ボックスはその背後で拡張されます。コンテンツをさらにプッシュするには、画像が占めるスペースをすべて考慮する必要があります。これを行う1つの方法は、次のように、右側のマージンに幅を追加することです。

.parentDiv p {
    margin: 20px 254px 20px 20px; /* 234 + 20 = 254 */
}

jsFiddleのソリューションを参照してください。

于 2012-01-25T04:34:50.203 に答える
1

余白が適用されていますが、画像が広いため、「十分」と見なされています。

この問題を修正するには、を追加しpadding: 0.01px;ます。100分の1ピクセルは表示されないため、直感的には違いはありませんが、パディングによってマージンが強制的に適用されるはずです。

于 2012-01-25T04:37:17.267 に答える
0

スペルミスに気づいたかどうかわかりませんか？

**.foatedDiv** {
  float:right;
  height:100%;
  margin:0;
}

floatDivする必要があります

コードはあなたが必要とすることをしていると思います。ただし、画像を参照するインラインスタイルでは、margin-left：20pxを追加すると、修正されるはずです。

さらに疑問がある場合は、タイトルと順序付けされていないリストを別のdivでラップし、そのdiv内からパディングやテキストの配置などを処理できます。

于 2012-01-25T04:45:20.037 に答える