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

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