inline-blockで横並びボックスの高さ揃え的レイアウト(謎
そういえばそろそろこれ使って大丈夫だよね。と思ったのでメモ。
ただし、使えないブラウザもあるので要テスト。
demo
<style type="text/css"> ul{display:inline-block;} li{display:inline-block;width:49%;vertical-align:top;*display:inline;zoom:1;} </style> -- 中略 -- <ul> <li>短いテキスト</li> <li>折り返し確定の長いテキスト長いテキスト長いテキスト長いテキスト</li> <li>短いテキスト</li> <li>短いテキスト</li> </ul>
注意
- White Space Nodeの扱いがブラウザによって違うため各liの間に半角スペース分の隙間が出来たり出来なかったりするのでよしなにがんばらないといけない。
- Fxの古いのとかだと派手に落ちる。ので、ニーズをしっかり考慮すること。
お礼
likealunaticさんのエントリでヨモツさんのスライドを思い出しました。
@likealunatic さん、@yomotsu さんありがとうございます!
- likealunatic さんのエントリ
- http://likealunatic.jp/2009/10/27_cssrollover.php
- yomotsu さんのスライド
- http://www.yomotsu.net/works/081016cssnite/
お礼その2
@taku_eof さんから-moz使えばなんとかなるよー的アドバイスを頂きました。その手がありましたね!今度検証して編集します。ありがとうございます。
http://twitter.com/taku_eof/status/5200455676
@neotag Fx2 では -moz プレフィクスつきの諸々で体裁を整えつつ、 inline-block を積極的に使ったことがあります。 意外と何とかなるもんでした。