0

私は段落があります：

<body>
<div id="attachment_839" class="wp-caption aligncenter" style="width: 462px">
<p class="wp-caption-text">Pargraph text which is much wider than 270px</p>
</div>
<body>

適用されるスタイリング：

body{
    width:270px !important; 
}

質問は：

なぜこの段落は広すぎるのですか？!important以前の設定とスタイルページを上書きするために使用されたので、私の方法です。

この問題を解決するために、次のコードを追加しました。

.wp-caption-text {
     width: 270px ! important;
}

それは証明されており、機能しますが、なぜ!important以前の幅を上書きしないのですか？考えられる答えを見つけるために何ができますか？

4

2 に答える 2

4

幅が宣言されていない段落<p>は、親コンテナーの幅全体を占めます (デフォルトのためauto)。

あなたの場合、幅が定義されています-それは親から抜け出します。

デモ

から削除style="width: 462px"してdivも、レイアウトが崩れることはありません

于 2012-11-09T12:29:46.117 に答える
0

質問はすでに回答されています。私は自分の観察を追加しているだけです。

問題のコードを試してみたところ、段落の幅が 270px で、div の幅が 420px であることがわかりました。したがって、!important を使用したオーバーライドは行われません。

!imporatant外部スタイルのみをオーバーライドできます。インライン スタイルをオーバーライドすることはできません。この場合、div の幅をインライン スタイルとして宣言しました。したがって、.wp-captionクラス宣言に幅を追加して を使用!importantしても、div の幅には影響しません。

幅を確認するために、段落と div に境界線を追加しました。以下は、定義されたスタイルです。

<style type="text/css">
body{
    width:270px !important; 
}
.wp-caption-text {
     width: 270px !important;
     border: 1px dotted green;
}
.wp-caption
{
    border: 1px dotted blue;
}
</style>

スクリーンショットは、段落幅と div 幅を示しています。 ここに画像の説明を入力

于 2012-11-09T12:54:42.377 に答える