楽しい可変グリッドレイアウトブラウザの幅に合わせて、それぞれのボックスが移動する、そんなレイアウトのサイトをたまに見かけることはありませんか？ ずっと気になっていたのですが、やっと試してみる事が出来ました。 CSSはいたってシンプルで、基本のボックスとそれを囲むdivを作るだけです。 ●HTMLソース <div id="container" class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ●CSSソース body { background-color: #559EC0; } #container { } .wrap { } .box { font-size: 90%; line-height: 1.6em; color: #036; background-color: #FFF;
