Yığılmış resimlere sahip önyükleme sütunları: aynı sütun yüksekliğine sahip olması gerekir

Question

Yığılmış görüntüler içeren bir Önyükleme bölümüm var ve sorun, ikinci ve üçüncü sütunların her zaman ilk sütunla aynı yüksekliğe sahip olmasını istiyorum. İkinci ve üçüncü sütun için bir çözüm bulamıyorum çünkü farklı görünüm boyutlarına değiştiğimde yükseklik olarak dalgalanıyorlar. Onları her zaman en alta ve tepeye hizalamak ideal olacaktır. İşte

.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 geçerli: http://www.bootply.com/mb2Ez6G7r8

Answer 1

Merhaba Paul Eğer bu şekilde çözebilir, ben size css flex özelliği ihtiyacım yok boostrap kullandığını görüyoruz.

<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> 

ve css

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

i esnek ihtiyacım yok niçin

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

sizin html bootrap eklemek unutma, Boostrap sınıfına .Row ile thml duyarlı hale ve bunu 12 sütun ile doldurabilirsiniz. Bu nedenle kol-sm- (Number) kutunuzda 5 + 4 + 3 = 12 olması durumunda bu linkten daha fazlasını okuyabilirsiniz grid systemn

Answer 2

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

yüksekliği muhtemelen yerine <img> elemanın css ile background-image kullanması gereken bir konudur edin. Umut, bu sorunu çözecektir.