0

最初のブログのテンプレートを作成しています。

ウィキペディアのようなインライン画像を記事の段落の横に配置したいと思います。私は次のコードでこれを達成しました：

<div class="photo">
    <img src="image_file.jpg">
</div>
div[class='photo'] {
    margin: 10px;
    float: left;
    clear: left;
}
img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}

この時点まではすべて正常に動作します。ただし、画像ファイルの下にもキャプションを付けたいので、

キャプション

直後

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

残念ながら、これ<p>により、この写真のdivが写真自体よりも大きく拡大し、面白く見えます。写真と同じmax-width大きさにし、テキストが大きい場合は2行目または3行目に移動します。

どうすればこれを達成できますか？width: auto; display: block;別のdivを入れてみ<p>ましたが、失敗します。

よろしくお願いします。

PS。ページがJS経由で読み込まれると問題を修正できることはわかっていますが、CSSの正しい方法で問題を解決する方法を学びたいと思います。ありがとう！

4

2 に答える 2

1

これを試してください-デモ

HTML

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

CSS

div.photo {
    margin: 10px;
    float: left;
    clear: left;
    position: relative;
    background: honeydew;
}

div.photo img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}


div.photo p {
    position: absolute;
    bottom: 12px;
    left: 10px;
    right: 8px;
    background: rgba(0, 0, 0, .4);
    color: #fff;
}
于 2012-08-16T13:36:01.820 に答える
1

div幅が幅よりも大きいというだけの問題がある場合は、img移動pし#photoて両方を別の内部に配置してみてdivください。

<div class="photoBox">
    <div class="photo">
        <img src="image_file.jpg">
    </div>
    <p>Caption for the image file which might be long</p>
</div>

...そしてそれに応じてCSSを変更します：

div.photoBox {
    margin: 10px;
    float: left;
    clear: left;
}
img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}
于 2012-08-16T13:39:44.220 に答える