HTML5画像キャプション：画像が次の行に移動します

画像ギャラリーを作成しようとしています。私は次のコードHTML5画像キャプション：画像が次の行に移動します

<div> 

<figure> 
<img src="sample-image.png" /> 
<figcaption>Caption Here</figcaption> 
</figure> 

</div>

を使用しています私の画像の下にキャプションを表示するには、今の問題は、私はギャラリーページを実行すると、画像が（図1）は、次のようになりますです。 2番目の画像が消えます。私はfigure-2のような画像を表示したいと思いますが、これを書くためにどのCSSコードを書くのか、それを修正する方法はわかりません。親切に私を助けてくれますか？事前に

感謝:)

enter image description here

出典

2012-03-02 black_belt

は、基本的には（あなたの数値は共通の容器に包まれていると仮定した場合）彼らの親にフィギュアとwhite-space: nowrap;ため

をdisplay: inline-block; white-space: normal;を設定する次に、あなたが行う必要があります他のプロパティを使用した小さな調整（vertical-alignなど）

この例を参照してください。http://jsfiddle.net/CDkNV/

出典

2012-03-02 14:20:25 fcalderan

ご返信ありがとうございます。このリンクをご確認ください。私はここに私のコードを貼り付けました。 http://jsfiddle.net/SxWbD/4/ありがとう:) –

あなたのjsfiddleのHTMLが間違っています。それは最後の子である '

'タグごとに1つの数字でなければなりません。それで 'figure { display：インラインブロック; } '場所では、物事は私のためによく見える。 http://jsfiddle.net/9UQJY/1/を確認してください。 –

Fabrizioのコメントhttp://jsfiddle.net/nJhwa/1/にあるJSFiddleがあります。注意しなければならないのは、Figureのコンテナに幅を設定しないと、長いキャプションがコンテナを展開し、十分長ければ、 'figure'コンテナを次の行に折り返します。特定の幅（ 'img'と同じ）を設定すると、キャプションテキストが折り返されます。 '' vertical-align：top''を '' figure''に適用すると、それらを見栄え良くするはずです。 – jmbertucci

HTML5画像キャプション：画像が次の行に移動します

答えて

関連する問題