具有堆疊圖像的自舉列：需要具有相同的列高

我有一個帶有堆疊圖像的Bootstrap部分，問題是我希望第二列和第三列始終與第一列具有相同的高度。我似乎無法找到第二和第三列的解決方案，因爲在更改爲不同的視圖大小時，它們的高度保持不變。讓它們始終與底部和頂部對齊是理想的。具有堆疊圖像的自舉列：需要具有相同的列高

.gallery { 
 
\t min-height: 980px; 
 
} 
 
    
 
.gallery .row{ 
 
\t display: -webkit-box; 
 
\t display: -webkit-flex; 
 
\t display: -ms-flexbox; 
 
\t display: flex; 
 
}

<div class="container-fluid gallery"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-5"> 
 
     <a href="#"><img src="http://lorempixel.com/528/980/technics" class="img-responsive"></a> 
 
    </div> 
 
    
 
    <div class="col-sm-4"> 
 
     <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
 
    </div> 
 
    
 
    <div class="col-sm-3"> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
    </div> 
 
    </div> 
 
    
 
</div>

這裏是Bootply：http://www.bootply.com/mb2Ez6G7r8

來源

2016-01-21 Paul

您是否嘗試添加'a {display：flex; }'？ –

所以你希望他們總是和第一列**一樣高，即使第一列比其他列更小或更大？ – xpy

xpy：正確。儘管在這種情況下，第一列總是會更大/更高。 – Paul

嗨保羅，你可以以這種方式解決，我看你用你不自舉需要的財產在你的CSS彎曲。

<div class="row"> 
<div class="col-sm-5"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/01.jpg"></a> 
</div> 

<div class="col-sm-4"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/02.jpg"></a> 
    <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
</div> 

<div class="col-sm-3"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/06.jpg" class="img-responsive"></a>

和你的CSS

.gallery { 
min-height: 980px !important;}

不要忘記添加bootrap在HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

我解釋爲什麼你不需要彎曲，自舉讓你的THML響應與類.row你可以填寫這12列，這就是爲什麼你有你的情況下col-sm-（Number）5 + 4 + 3 = 12如果你想在這個鏈接中閱讀更多grid systemn

來源

2016-03-07 13:22:56

.column-sm-4{ 
    display: flex; 
    flex-direction: row; 
}

如果高度是你應該使用background-image用CSS來代替<img>元素的問題。希望這能解決問題。

來源

2017-07-29 11:47:13 user1744669

具有堆疊圖像的自舉列：需要具有相同的列高

回答

相關問題