以相同的高度并排排列

Question

好的，我需要的是相当简单的，尽管这是我在使用CSS时从未设法解决的问题之一。所以，我在这里......

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

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

---

以下是一个直观的例子：

结果 好，但我仍然需要一件事：

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

有什么想法吗？

---

P.S。

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 Plugin”：

添加

包括你的头脑

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

并将.parent-div上的函数调用为：

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

有关详细用法和限制，是否适合您的网站首先阅读this并继续。

Answer 3

设置最小宽度。所以在你的CSS中有： #whatevertheboxitscalled { min-width:100px; } 显然它不一定是100px，但无论大小最合适。