2ヘッダが側

Question

によって2つの画像の側に並んI持っている現在、次のHTML構造：

<div id="image" style="margin: 20px;"> 
     <h5> 
      <span>DriverName1</span> 
      <span>DriverName2</span> 
     </h5> 
     <img src=/> 
     <img src= /> 
    </div> 

私はイメージは、彼らがやっている並べて表示させるしようとしたが、午前drivername1のヘッダーとdrivername2は同じ画像の上にお互いのすぐ隣に現れる。これらのスパンを各画像の左上端と一致させるにはどうすればよいですか？私は各画像に別々のヘッダーを追加しようとしましたが、それは画像を上下に1つ上に移動させます。

Answer 1

あなたはディスプレイの使用を検討することができます。この

チェックのために曲がる次のスニペット

div{ 
 
    display:flex; 
 
} 
 
.image { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border:1px solid; 
 
    margin-left:10px; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="image" style="margin: 20px;"> 
 
    <section class="image"> 
 
    <header>DriverName1</header> 
 
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"> 
 
    </section> 
 
    <section class="image"> 
 
    <header>DriverName2</header> 
 
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px> 
 
    </section> 
 
</div>

非フレックスソリューション

div * { 
 
    display: inline-block; 
 
} 
 
.image { 
 
    border: 1px solid; 
 
    margin-left: 10px; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: table-cell; 
 
} 
 
header {}

<div id="image" style="margin: 20px;"> 
 
    <section class="image"> 
 
    <header>DriverName1</header> 
 
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"> 
 
    </section> 
 
    <section class="image"> 
 
    <header>DriverName2</header> 
 
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px> 
 
    </section> 
 
</div>

希望これは