display:boxとbox-ordinal-group
CSS3にはdisplay:boxとbox-ordinal-groupという便利な記法があって、マルチカラムレイアウトっぽいことが手軽にできる。詳しくはCSS3の数行で作る簡単な3カラムレイアウトを参照。
で、サンプルを書いてみた。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>さんぷる</title> | |
| <style type="text/css"> | |
| .item { | |
| display: -moz-box; | |
| display: -webkit-box; | |
| display: box; | |
| } | |
| .item-image { | |
| -moz-box-ordinal-group: 1; | |
| -webkit-box-ordinal-group: 1; | |
| box-ordinal-group: 1; | |
| } | |
| .item-name { | |
| -moz-box-ordinal-group:2; | |
| -webkit-box-ordinal-group:2; | |
| box-ordinal-group:2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="map-item"> | |
| <div class="map-item-image"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Steve_Jobs.jpg/200px-Steve_Jobs.jpg"></div> | |
| <div class="map-item-name">スティーブ・ジョブズ</div> | |
| </div> | |
| <div>aaaa</div> | |
| </body> | |
| </html> |
Google Chrome で表示すると次のようになる。
floatを使う必要がないのが嬉しい。
追記
CSS3の数行で作る簡単な3カラムレイアウトを見ると、複数ブラウザに対応する場合にはbox-sizingも考慮する必要があるみたい。