Блоки бок о бок с одинаковой высотой

Question

Хорошо, мне нужно довольно просто, хотя это одна из тех вещей, которые мне никогда не удавалось обойти при использовании CSS. Итак, здесь я ...

• Я использую пользовательский шаблон, построенный вокруг Twitter Bootstrap.

• Этот шаблон содержит раздел (объявленный как span6 row), содержащий небольшие блоки (объявленные как span3). В конце концов, подблоки образуют строки (2 блока в строке).

---

Вот визуальный пример:

Результат является нормально, хотя я по-прежнему нужно одно:

КАК я убедитесь, что 2 соседних блока имеют одинаковую высоту? (например, 1-й блок - «Некоторое название здесь» - и 2-й блок - «Удивительная работа» - белые прямоугольники имеют ту же высоту, независимо от содержимого ... (как и у 2 последние блоки)).

Любые идеи?

---

P.S.

1. Пожалуйста, дайте мне знать, если вам нужно знать что-либо еще о «внутренней» структуре.
2. Я уверен, что это, возможно, придется делать с «чистыми» исправления, и т.д. - но если честно, я фактически никогда не понимал ... магия за трюк ... :(

Answer 1

Попробуйте следующее:

1) Назначение родительского DIV с " display: table "и child div с" display: table-cell ":

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 Plugin":

Включите его голову, добавив

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

И вызовите функцию на вашем .parent-DIV как:

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

Для подробного использования и ограничений, подходит ли он для вашего сайта, сначала прочитайте this и продолжайте.

Answer 2

Установка мин ширину Так что в вашем CSS есть:.. #whatevertheboxitscalled { min-width:100px; } Очевидно, что это не должно быть 100px, но независимо от размера лучше подходит

Answer 3

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