垂直旁邊的一個較大的圖像對齊3個圖像

Question

因此，這裏是我的代碼：

<div class="content_container"> 
    <div class="left"> 
     <div class="slider" data-interval="1000"> 
      <img src="..." /> 
     </div> 
    </div> 
    <div class="right"> 
     <strong>Featured Items</strong> 
     <img src="..." /> 
     <img src="..." /> 
     <img src="..." /> 
    </div> 
</div> 

的content_container父母必須響應寬，我需要設計看起來像這樣：

有沒有簡單的方法來做到這一點與CSS（又名不是JavaScript）？我已經嘗試過使用彈性盒子搞亂一堆，但它不是垂直排列，否則當content_container父母設置爲特定寬度時，它不能正確縮放。

編輯：左右需要的高度，以匹配無論你加載哪些圖像

Answer 1

html, 
 
body { 
 
    margin: 0; 
 
    height: 100% 
 
} 
 

 
.content_container { 
 
    background-color: blue; 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.left, 
 
.right, 
 
.right img { 
 
    margin: 5px; 
 
} 
 

 
.left, 
 
.right img { 
 
    border: 2px solid black; 
 
} 
 

 
.left { 
 
    flex-basis: 75%; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-basis: 25%; 
 
} 
 

 
.right img { 
 
    flex-grow: 1; 
 
    margin-bottom: 0; 
 
    margin-left: 0; 
 
}

<div class="content_container"> 
 
    <div class="left"> 
 
     <div class="slider" data-interval="1000"> 
 
      <img src="..." /> 
 
     </div> 
 
    </div> 
 
    <div class="right"> 
 
     <strong>Featured Items</strong> 
 
     <img src="..." /> 
 
     <img src="..." /> 
 
     <img src="..." /> 
 
    </div> 
 
</div>