Post

ブロック要素の高さを揃える

高さというより下端だけど。

equal-bottom-nに対応する要素の下端を揃える。

$(function() {
  for (var i = 1; $('.equal-bottom-' + i).length; i++) {
    var block = $('.equal-bottom-' + i);
    var height = 0;
    block.each(function() {
      height = Math.max($(this).offset().top + $(this).height(), height);
    });
    block.each(function() {
      $(this).height(height - $(this).offset().top);
    });
  }
});

div.box {
  border: 1px solid #000;
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 10px;
}
div.grid {
  _height: 1%;
  *zoom: 1;
}
div.grid:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
div.grid div.column {
  float: left;
}
p {
  margin-bottom: 0;
  margin-top: 0;
}
<div class="grid">
  <div class="column" style="margin-right: 20px; width: 200px;">
    <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
  </div>
  <div class="column" style="margin-right: 20px; width: 200px;">
    <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
  </div>
  <div class="column" style="width: 200px;">
    <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
  </div>
</div>
<hr />
<div class="grid">
  <div class="column" style="margin-right: 20px; width: 200px;">
    <div class="box"><p>ほげほげほげほげほげ...</p></div>
    <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
  </div>
  <div class="column" style="margin-right: 20px; width: 200px;">
    <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
  </div>
  <div class="column" style="width: 200px;">
    <div class="box"><p>ほげほげほげほげほげ...</p></div>
    <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
  </div>
</div>
<hr />
<div class="grid">
  <div class="column" style="margin-right: 20px; width: 200px;">
    <div class="box"><p>ほげほげほげほげほげ...</p></div>
    <div class="box"><p>ほげほげほげほげほげ...</p></div>
    <div class="box equal-bottom-3"><p>ほげほげほげほげほげ...</p></div>
  <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
  </div>
  <div class="column" style="margin-right: 20px; width: 200px;">
    <div class="box equal-bottom-3"><p>ほげほげほげほげほげ...</p></div>
    <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
  </div>
  <div class="column" style="width: 200px;">
    <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
  </div>
</div>

2008/12/05 12:35 | code

Categories

Archives

About

こんにちは、上山根 祐輔 (かみやまね ゆうすけ) です。東京を拠点に活動しているフリーランスのデザイナー、デベロッパー、あと何でも屋です。

というか、Fugue Icons の作者、と言ったら分かりやすいかも。