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

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