2頭並排

Question

2圖像側一字排開我目前是以下HTML結構：

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

我試圖讓圖像顯得並排，他們正在做的一面，但標頭drivername1和drivername2在相同的圖像上彼此緊挨着顯示。如何讓這些跨度與每幅圖像的左上邊緣匹配？我試圖在每個圖像上添加單獨的標題，但這會使圖像垂直移動。

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>

希望這有助於