CSS自舉3列與

Question

即時具有下述佈局相同的高度：

標記：

<div class="row"> 
    <div class="col-md-12">      
     <div class="row"> 
      <div class="col-md-6"> 
      <img class="img-responsive" src="/app/img/shop/teaser.jpg"> 
     </div> 
     <div class="col-md-3"> 
      <div class="boxuser"> 
       user 
      </div> 
      <a href="/shop/cart" class="cart"> 
       cart 
      </a> 
     </div> 
     <div class="col-md-3"> 
      <div class="navi"> 
       navi 
      </div> 
     </div> 
    </div>     
</div> 

    [1]: http://i.stack.imgur.com/WNuXu.jpg 

用戶和購物車是具有固定高度，我想有圖像和navi響應，所以他們都有相同的高度。 任何想法，如果有可能？

謝謝

Answer 1

這是一個不錯的。但邏輯上不可能。我的意思是圖片無法響應，但圖像（div）的容器可以響應。因爲圖片有一個高度。如果您根據用戶購物車調整大小，Image看起來會很糟糕。但你可以看看masonry script。通過使用砌體，你可以得到你想要的。

或者另一種解決方案是給圖像和navi以最小高度。最小高度應該是購物車的高度。

Answer 2

使用自定義類

.equal-height { 
      display: -webkit-box; 
      display: -webkit-flex; 
      display: -ms-flexbox; 
      display:   flex; 
      } 

例子：

<div class="row row-eq-height"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 

Answer 3

您可以使用或Flexbox的或本script與jQuery

HTML

<div class="row"> 
    <div class="col-md-12">      
    <div class="row same-height"> 
     <div class="col-md-6"> 
     <img class="img-responsive" src="/app/img/shop/teaser.jpg"> 
    </div> 
    <div class="col-md-3 same-height"> 
     <div class="boxuser"> 
      user 
     </div> 
     <a href="/shop/cart" class="cart"> 
      cart 
     </a> 
    </div> 
    <div class="col-md-3 same-height"> 
     <div class="navi"> 
      navi 
     </div> 
    </div> 
    </div>     
</div> 

JS

$(function() { 
    $('.same-height').matchHeight(); 
});