1

テキストラッパーの幅を画像の下に自動縮小する必要がありました。

例えば：

<figure>
    <img src="mypicture.jpg" />
    <figcaption>
        This is a long description.This is a long description.This is a long description.
    </figcaption>
</figure>

幅の異なる画像がたくさんあるので、今はborder周りにimgとが必要です。そのため、画像の幅に合わせて幅figcaptionを自動縮小したいと考えています。figcaptionつまり、幅が 100px の画像がある場合は、figcaption100px も必要です。

純粋なhtmlとcssを使用するだけで、jsなしでこれを行うことができるかどうか教えてもらえますか?

4

2 に答える 2

1

ちょっとしたコツが必要です。コンテナの表示をテーブルに設定し、幅を小さくすることができます。コンテンツの幅を (表のように) 自動で揃えます。

ここに例があります

于 2012-10-17T02:24:23.837 に答える
0 
figure {
    display: table;
}
.page-content figure figcaption {
    display: table-caption;
    caption-side: bottom;
}

これは物事を達成します。cssを使用して固定画像を指定すると、@Chris Leeの答えは正しいです。私の状況では、各画像の幅を指定したくありません。これは、量が多く、幅がランダムであるためです。

一番上のCSSは私にとってはうまくいきます。

于 2012-10-18T07:33:56.440 に答える