Önyükleme iç içe geçmiş satırlar ve eşit yükseklikte hizalanmamış 2 sütun

Question

Herkese bu konuda bir çözüm aradı, ancak boşuna. Şu anda bootstrap kullanıyorum ve 2 sütunlu sıraya sahip sağ sütuna sahip 1 satır 2 sütuna sahibim. Sağda 2 tane daha büyük resim bulunan soldaki 1 büyük resmim var ama bir sebepten dolayı büyük resmim sağdaki sütunla düzgün hizalanmıyor. Flexbox'ı denedim, ekran: tablo, hiçbir şey işe yaramıyor. Mobil görünüm için kesme noktasına ulaştığı zaman, düzgün bir şekilde (% 100 genişlik) x3 hizalanır, ancak biraz daha büyük ekranlar için sadece dağılır. Herkes yardımcı olabilirse takdir et! Çok teşekkür ederim. Bu kod.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <img src="http://placehold.it/832x532"> 
     </div> 
     <div class="col-xs-6"> 
      <div class="row"> 
       <div class="col-xs-12"><img src="http://placehold.it/513x294"></div> 
       <div class="col-xs-12"><img src="http://placehold.it/513x294"></div> 

      </div> 
     </div> 
    </div> 
</div> 

Bootply

Düzenleme

:

[   ] [Image 2 ] 
[ Image 1 ] [  ] 
[   ] [Image 3 ] 
[   ] [  ] 

Her iki sütun eşit yükseklikte olmalıdır: gibi bakmak gerekiyordu. Şu anda sağladığım açılışta, ilk sütun ikinci sütundan daha kısa.

Answer 1

display: flex - row kullanmak için çok basit bir çözüm ve istediğiniz yuvalanmış sütunlar eşit bir yükseklik olacaktır. Ancak, Bootstrap sınıfını geçersiz kılmak yerine, kendi sınıfınızı oluşturmak ve bu durumda kullanmak daha iyidir.

<div class="row equal"> 
    <div class="col-xs-6"> 
    // content 
    </div> 
    <div class="col-xs-6"> 
    // content 
    </div> 
</div> 

.equal, 
.equal > div[class*='col-'] { 
    display: flex; 
} 

Ben senin koduyla örnek oluşturdu ve çapraz tarayıcı çözüm

JSFiddle