Post

なんちゃってvalign

やはり出来ると便利なので。

$(function() {
  $('div.grid.middle > div.column').addClass('middle');
  $('div.grid.bottom > div.column').addClass('bottom');
  $('div.grid div.column').filter('.middle, .bottom').each(function() {
    var height = 0;
    $(this).siblings().each(function() {
      height = Math.max(height, $ (this).height());
    });
    var margin = Math.max(height - $(this).height(), 0);
    $(this).css('margin-top', ($(this).hasClass('middle') ? Math.floor (margin / 2) : margin) + 'px');
  });
});

div.grid {
  _height: 1%;
  *zoom: 1;
}
div.grid:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
div.grid div.column {
  float: left;
}
<div class="grid middle">
  <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
  <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
  <div class="column" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>
<hr />
<div class="grid bottom">
  <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
  <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
  <div class="column" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>
<hr />
<div class="grid">
  <div class="column middle" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
  <div class="column" style="margin-right: 20px; width: 100px;"><p>ほげほげほげほげほげ...</p></div>
  <div class="column bottom" style="width: 100px;"><p>ほげほげほげほげほげ...</p></div>
</div>

2008/12/04 08:01 | code

Categories

Archives

About

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

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