0

ブログ投稿には次のルールがあります。

p + p {
text-indent: 1.5em;
}

divで定義：

.entry-content{
    padding: 2em 3em 4em;
}

<p>そして私はこのように定義された中にいくつかの写真を持っています：

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    text-indent: 0em;
}

何が起こっているのかというと、最初に画像のサイズ変更はインデントが適用される前に行われるため、画像の右マージンは定義されたパディング（3em）からインデントのサイズ（1.5em）になります。インデント後に画像のサイズを変更しますか？

そして、画像があってもtext-indent: 0em;、画像はp + pの規則に従い、インデントがあります。

最大幅を100％ではなく96％に設定して問題を解決しましたが、これを解決するためのより論理的な方法はありませんか？

ありがとう

4

1 に答える 1

1

画像のmax-widthの幅は、画像を含むの幅によって決まりpます。text-indentの幅は変更されませんがp、テキスト/画像がシフトインされ、画像がオーバーハングします。結論として、正しい動作が見られます。

目的の結果を得るには、html/cssを変更する必要があります。より完全な例がなければ、私は代替アプローチを提供することはできません。画像を試しposition: absoluteてみると、画像が左上隅に表示されます（とは無視しtext-indentてpaddingください）。position: relativeこれを試す場合は、含むを設定することを忘れないでくださいp。

p + p {
    text-indent: 1.5em;
    position: relative;
}

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}
于 2012-05-07T16:19:00.630 に答える