以相同的高度并排放置

Question

OK, what I need is fairly simple, though it's one of those things that I've never managed to get my head around when using CSS. So, here I am...

• I'm using a custom template, built around Twitter Bootstrap.

• This template features a section (declared as span6 row ), containing small blocks (declared as span3 ). In the end, the sub-blocks form rows (2 blocks per row).

---

Here's a visual example :

The result is ok, though I'd still need one thing :

HOW do I make sure that 2 adjacent blocks have the exact same height? (eg The 1st block - "Some title here" - and the 2nd block - "Awesome work" - white rectangles being of the exact same height, no matter what the contents are... (much like the 2 last blocks)).

Any ideas?

---

PS

1. Please let me know, in case you need to know anything else about the "inner" structure.
2. I'm pretty sure it may have to do with "clear" fixes, etc - but to be honest I've never actually understood the... magic behind the trick... :(

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

Try the following:

1) Assigning parent div with "display:table" and child div's with "display:table-cell" like:

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) You can also use "EqualHeights jQuery Plugin":

Include it your head by adding

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

And call the function on your .parent-div as:

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

For detailed usage and limitations, whether it is suitable for your website first read this and proceed.

Answer 3

Set a min-width. So in your css have: #whatevertheboxitscalled { min-width:100px; } #whatevertheboxitscalled { min-width:100px; } Obviously it doesn't have to be 100px, but whatever size fits best.