css - 块并排具有相同的高度

Question

好的，我需要的东西相当简单，尽管它是我在使用 CSS 时从未想过的事情之一。所以，我在这里……

• 我正在使用围绕 Twitter Bootstrap 构建的自定义模板。

• 该模板有一个部分（声明为span6 row），包含小块（声明为span3）。最后，子块形成行（每行 2 个块）。

---

这是一个视觉示例：

结果还可以，尽管我仍然需要一件事：

如何确保 2 个相邻的块具有完全相同的高度？（例如，第一个块 - “这里有一些标题” - 和第二个块 - “很棒的工作” - 白色矩形的高度完全相同，无论内容是什么......（很像最后两个块））。

有任何想法吗？

---

附言

1. 如果您需要了解有关“内部”结构的任何其他信息，请告诉我。
2. 我很确定这可能与“清晰”修复等有关 - 但老实说，我从来没有真正理解过......这个技巧背后的魔力...... :(

Answer 1

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

Answer 2

尝试以下操作：

1）用“display：table”分配父div，用“display：table-cell”分配子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();

详细使用和限制，是否适合您的网站，请先阅读本文并继续。

Answer 3

设置最小宽度。所以在你的 css 中有： #whatevertheboxitscalled { min-width:100px; } 显然它不必是 100px，但任何尺寸都最合适。