キャプションが同じ行にあるか同じ行に残るように画像を取得するにはどうすればよいですか？

Question

3つの画像をすべて1つの行に表示し、その下にそれぞれのキャプションを表示します。

ほとんどの回答が表示されているように私はdisplay: inline-block;を使用していますが、イメージはまだ別の行に折り返しています。

以下のコードを参照してください。

この例では外部CSSファイルにアクセスできないため、インラインコードで対処する必要があります。 100％：

<div style="display: inline-block; padding-right: 10px;"> 
<figure><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/20160623_172407_resized.png"}}" alt="Previous Winner" width="300" /><figcaption>Michelle D. - Bakersfield, CA<br /> Fitbit&reg; Winner<br /> Spring 2016</figcaption></figure> 
<figure><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Check_winner__2.png"}}" alt="Previous Winner" width="300" /><figcaption>Gilberto M. - Hanford, CA<br /> $1,000 Cash Winner<br /> Summer 2016</figcaption></figure> 
<figure><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Eric_Boettcher.png"}}" alt="Previous Winner" width="300" /><figcaption>Eric B. - Brentwood, CA <br /> Baseball Getaway Winner<br /> Spring 2016</figcaption></figure> 
</div> 

Answer 1

あなたのケースでdivがそれぞれのimgタグの幅を与える表示インラインブロック

です。 、これを正常に取得するあなたの図形要素にdisplay: inline-block;を追加するには

fiddle- click here

Answer 2

：

は、各図の表示インラインブロックにここ

フィドルの例を与えます。私はまた、あなたがフィドルで見るようにマージンを取り除きました。

あなたは図の要素は、次のデフォルトのプロパティを持って見ることができます：

figure { 
    display: block; 
    margin-top: 1em; 
    margin-bottom: 1em; 
    margin-left: 40px; 
    margin-right: 40px; 
} 

ソース：http://www.w3schools.com/tags/tag_figure.asp

あなたのHTML：

<div> 
<figure style="display: inline-block; float: left; margin: 0;"><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/20160623_172407_resized.png"}}" alt="Previous Winner" width="300" /><figcaption>Michelle D. - Bakersfield, CA<br /> Fitbit&reg; Winner<br /> Spring 2016</figcaption></figure> 
<figure style="display: inline-block; float: left; margin: 0"><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Check_winner__2.png"}}" alt="Previous Winner" width="300" /><figcaption>Gilberto M. - Hanford, CA<br /> $1,000 Cash Winner<br /> Summer 2016</figcaption></figure> 
<figure style="display: inline-block; float: left; margin: 0"><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Eric_Boettcher.png"}}" alt="Previous Winner" width="300" /><figcaption>Eric B. - Brentwood, CA <br /> Baseball Getaway Winner<br /> Spring 2016</figcaption></figure> 
</div> 

あなたはDIVから削除することができます。ここのフィドルへのリンクをご覧ください：https://jsfiddle.net/john_h/w3uebtnb/