1

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;
}
4

2 に答える 2

1

以下は、画像用の内部ブロックとテキスト用のブロックを持つ div を作成します。どちらも 500px のままにする必要があります。画像が 500px を超える場合、それらは切り取られます。非常に長い途切れのない文字列でない限り、テキストがオーバーフローすることはありません。

これで問題が解決しない場合は、jsFiddle を使用して例を挙げてください。

CSS

.container { 
        width: 500px; 
        overflow: hidden; 
        background:red; 
        display: inline-block;
        border: 1px solid black; 
}

HTML

<div class="container">
  <div class="images">
    <img src="image1">
    <img src="image2">
    <img src="image3">
  </div>
  <div class="caption">
    some text
  </div>
</div>
于 2013-06-28T01:57:16.643 に答える