スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

letter-spacingでボックスを均等に横並びにする方法

複数のボックスを均等に横並びにする方法はいろいろありますが、「Center Multiple DIVs with CSS」ではテキスト関係のプロパティによって実現する方法が紹介されていました。

ボックスの均等配置

上記のコードは次のとおり。

<style type="text/css">
#multibox {
	width: 500px;
	margin: 20px auto;
	background-color: #f1f1f1;
	letter-spacing: 21px;
	letter-spacing: 22px\9;   /* for IE8 */
	white-space: nowrap;
	overflow: hidden;
}
#multibox p {
	margin: 0 0 1em;
	letter-spacing: normal;
	text-align: center;
}
#multibox .box {
	display: inline-block;
	*display: inline;   /* for IE6,7 */
	*margin: 0 25px 0 0;   /* for IE6,7 */
	width: 80px;
	height: 80px;
	background-color: #ccc;
	vertical-align: top;
	zoom: 1;
}
</style>
<div id="multibox">
	<p>ボックスの均等配置</p>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

ポイントは親要素に letter-spacing を設定して、子要素の間隔を文字間として扱うことでしょうか。これだけだと、子要素が親要素の幅を超えてしまいカラム落ちをするので、overflow と white-space も設定しています。

あと、子要素は float するのではなく、inline-block で横並びにしています。ただ、inline-block はIE6とIE7では効かないので、IE対策は必要ですね。

今までは子要素を float して margin-left で間隔を取り、親要素の margin-left をマイナスに設定して調整する方法が好きでしたが、これはなかなか使えるのでは。

まあ、CSS3が一般的に慣ればこういった問題も display: box; で解決なんですが。ひとつの方法として覚えておいて損はなさそうです。

詳しくは以下より、
Center Multiple DIVs with CSS

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。