html - 画像とテキストの位置合わせ

Question

以下のマークアップに示すように、画像とテキストが隣接する html ページがあります。

<div><img src="image1.png"/><p>First Image</p></div>
<div><img src="image1.png"/><p>First Image</p></div>

画像とテキストをすべての DIV の下に並べて配置し、すべての div をページにリストする必要があります。

テーブルを使用せずに CSS でこれを実現する方法を教えてください。

Answer 1

私は使うだろうdisplay: inline-block

img {
    width: 100px;
    display: inline-block;
}
p {
     display: inline-block;
}

デモjsFiddle

Answer 2

div{
  overflow:hidden;
  display:inline;
 }
 div img{
   display:inline-block;
 }
 div p{
   display:inline-block;
 }

Answer 3

私があなたを正しく理解しているなら、あなたはあなたのテキストをあなたのイメージとインラインにしたくありません。その場合、これがまだ発生していない理由は、段落<p>要素がブロック要素であるため、それを含む親の幅全体になるためです。<p>インラインで表示したくない場合は、次のようにタグで display inline を使用します

div p{ /* Change this according to your selectors. */
   display: inline;
}