與同一高度並排塊

好的，我需要的是相當簡單的，儘管這是我在使用CSS時無法擺脫困境的那些事情之一。所以，我在這裏...與同一高度並排塊

我使用了一個自定義模板，圍繞Twitter Bootstrap構建。
此模板包含一個部分（聲明爲span6 row），其中包含小塊（聲明爲span3）。最後，子塊形成行（每行2個塊）。

這裏有一個直觀例子：

enter image description here

結果爲 OK，但我仍然需要一兩件事：

我該怎麼辦確保2個相鄰的塊具有完全相同的高度？（例如第一塊 - 「這裏的一些標題」 - 和第二塊 - 「令人敬畏的作品」 - 白色矩形的高度完全相同，無論內容是什麼......（很像2最後的塊））。

任何想法？

P.S.

請讓我知道，如果你需要知道什麼對「內部」結構。
我敢肯定它可能有「明確的」修復等做 - 但說實話，我從來沒有真正瞭解的伎倆背後的... ...魔:(

來源

2013-04-27 Dr.Kameleon

嘗試以下操作：

1）分配父與「格顯示：表格「和子div的」顯示：表格單元格「，例如：

CSS: 
.parent-div{ 
    border: 1px solid grey; 
    display: table; 
    float: none; 
} 
.child div{ 
    border: 1px solid grey; 
    min-height: 100%; 
    height: 100%; 
    display: table-cell; 
    float: none; 
} 

HTML: 

<div class="span6 parent-div"> 
    <div class="row"> 
    <div class="span3 child-div"> 
     ...... 
    </div> 
    <div class="span3 child-div"> 
     ...... 
    </div> 
</div>

2）您也可以使用「EqualHeights jQuery插件」：

加入

<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>

它列入你的頭和調用函數您.parent-DIV爲：

$('.parent-div').equalHeights();

有關詳細用法和侷限性，是否適合您的網站首先閱讀this並繼續。

來源

2013-04-27 08:52:31 prem

-1

設置一個最小寬度所以在你的CSS有：。 #whatevertheboxitscalled { min-width:100px; } 顯然，這並不一定是100像素，但無論大小最適合

來源

2013-04-27 07:22:27

<!-- ------------------------------------------ 
Bootstrap 2 : Markup 
Credit : http://www.2scopedesign.co.uk/responsive-equal-height-columns-in-bootstrap/ 
------------------------------------------- --> 
<div class="row"> 
    <div class="span6"> 
    <div class="content-box"> 
     Content here 
    </div> 
    </div> 
    <div class="span6"> 
    <div class="content-box"> 
     Content here 
    </div> 
    </div> 
</div> 

<!-- ------------------------------------------ 
jQuery part 
------------------------------------------- --> 
<script> 
    //equal height plugin 
    $.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) {return selector.apply(el);}).get()); 
    } 
    $(window).load(function(){ 
    equalHeight(); 
    }); 
    $(window).resize(function(){ 
    $('.content-box').css('height', ''); 
    equalHeight(); 
    }); 
    function equalHeight(){ 
    if ($(window).width() > 768) { 
     $('.content-box').height(function() { 
     var maxHeight = $(this).closest('.row').find('.content-box').max(function() { 
      return $(this).height(); 
     }); 
     return maxHeight; 
     }); 
    } 
    else { 
     $('.content-box').css('height', ''); 
    } 
    } 
</script>

來源

2014-11-28 11:02:11 Olivier

與同一高度並排塊

回答

相關問題