CSS の質問: (各画像ではなく) 境界線で囲まれた 3 つのインライン画像を含むコンテナーが必要です。画像の行の下とコンテナーの境界線の内側に、1 文または 2 文のテキストが必要です。テキストがない場合、コンテナの境界線は、display:inline-block を使用した画像行とほぼ同じ幅と高さになります。テキストを追加すると、コンテナの幅は 100% になります。テキストを画像行の下で折り返し、画像行の左側/右側を超えて拡大しないようにします。これを行う方法と、float:left および/または display:inline、display:inline-block を使用して行うことができるかどうかを知りたいです。両方の方法で実行できる場合、長所と短所は何ですか。
HTML:
<div class="container">
<img src="image1">
<img src="image2">
<img src="image3">
some text
</div>
CSS:
.container {
display: inline-block;
border: 1px solid black;
}