Boostrap和Flexbox的等高柱高

Question

我試圖使用Bootstrap和Flexbox創建一個庫，其中有一個大圖像，旁邊是兩個較小的堆疊圖像，並且兩者都是相同的高度。

容器列似乎正在做他們的工作，並保持相同的高度，但我需要列中的img填充容器的高度。

它適用於Firefox，如果我在img上使用height: 100%，但在Chrome和Safari中均可使用。

img { 
 
    max-width: 100%; 
 
    width: auto\9; 
 
    height: auto; 
 
    vertical-align: middle; 
 
    border: 0; 
 
    -ms-interpolation-mode: bicubic; 
 
} 
 
figure { 
 
    margin-bottom: 0; 
 
} 
 
.rts-col { 
 
    margin-bottom: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="rts-col col-8"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 
    <div class="rts-col col-4"> 
 
     <figure style="margin-bottom: 30px;"> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 
    </div> 
 
</div>

這裏的標記和樣式表：https://jsfiddle.net/tylorreimer/q8qe5p80/2/

Answer 1

看起來對我來說，就好像你需要一個有一側的多個圖像嵌套flexboxes。

img { 
 
    max-width: 100%; 
 
    width: auto\9; 
 
    height: auto; 
 
    vertical-align: middle; 
 
    border: 0; 
 
    -ms-interpolation-mode: bicubic; 
 
} 
 

 
figure { 
 
    margin: 0; 
 
} 
 

 
.rts-col.split { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="rts-col col-8"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 
    <div class="rts-col col-4 split"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

如果使col-4柔性容器column方向，然後你可以使用justify-content及其space-between對準那些2圖像頂部/底部

添加d-flex flex-column justify-content-between您<div class="rts-col col-4">所以它變成了<div class="rts-col col-4 d-flex flex-column justify-content-between">

N OTE，我也去掉了一些你的利潤率，使他們更好地對準

img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
figure { 
 
    margin: 0; 
 
} 
 
.rts-col { 
 
    margin-bottom: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="rts-col col-8"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 
    <div class="rts-col col-4 d-flex flex-column justify-content-between"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 
    <div class="rts-col col-6"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 
    <div class="rts-col col-6"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/1400x933"> 
 
     </figure> 
 
    </div> 
 
    </div> 
 
</div>