css - 同じ高さで並んだブロック

Question

OK、私が必要とするものはかなり単純ですが、これは CSS を使用するときに頭に浮かんだことのないものの 1 つです。だから、ここにいる...

• Twitter Bootstrap を中心に構築されたカスタム テンプレートを使用しています。

• このテンプレートには、span6 row小さなブロック ( として宣言) を含むセクション ( として宣言span3) があります。最後に、サブブロックが行を形成します (行ごとに 2 ブロック)。

---

視覚的な例を次に示します。

結果は問題ありませんが、まだ 1 つのことが必要です。

隣接する 2 つのブロックの高さがまったく同じであることを確認するにはどうすればよいですか? (たとえば、最初のブロック - 「ここにいくつかのタイトル」 - および 2 番目のブロック - 「素晴らしい作品」 - コンテンツが何であれ、まったく同じ高さの白い長方形... (最後の 2 つのブロックとよく似ています))。

何か案は？

---

PS

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) 親 div を「display:table」で割り当て、子 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 プラグイン」も使用できます。

追加して頭に含めます

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

そして、次のように .parent-div で関数を呼び出します。

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

詳細な使用法と制限事項については、それがあなたの Web サイトに適しているかどうかを確認するために、まずこれを読んで続行してください。

Answer 3

最小幅を設定します。したがって、css には次の #whatevertheboxitscalled { min-width:100px; } ように記述します。