在垂直堆棧中顯示img元素旁邊其他img？

Question

我試圖像這樣顯示一組IMG元素：

我嘗試使用浮動：留在IMG 1和float：右側另IMGS但他們不垂直對齊。我將如何做到這一點？

Answer 1

要做到這一點的一種方法是在容器中有兩個孩子divsdiv。一個應該是img1，另一個應該是包含其他三個，這也應該有display: block;正常工作（img2，img3和img 4）。

• 把float: left;上img1和float: right這三個較小的container。

• 爲了安全起見，請再次輸入img1和新的container：vertical-align: middle。

• 如果容器也有固定的尺寸，它會更容易。

圖片：

Answer 2

Flexbox，就應該有這方面的工作。

首先，在父容器上設置display: flex和align-items: center。

其次，在右邊的容器上設置display: flex然後flex-direction: column。

圖像將垂直對齊。

.container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.left { 
 
    margin-right: 10px; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.right img { 
 
    margin: 5px 0; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/320"> 
 
    </div> 
 
    <div class="right"> 
 
    <img src="http://placehold.it/150x100"> 
 
    <img src="http://placehold.it/150x100"> 
 
    <img src="http://placehold.it/150x100"> 
 
    </div> 
 
</div>