NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

横一列に並ぶ複数要素を均等幅で配置する

2014年12月25日CSSテクニック

横一列に並ぶ複数要素を均等幅で配置する

ひとつの親要素に対して横一列に並ぶ複数の要素を、display: tableとtable-layout: fixedを使って、隙間なく均等幅で配置する方法です。

デモページ

HTML

<div id="contents">
	<div class="box">box01</div>
	<div class="box">box02</div>
	<div class="box">box03</div>
	<div class="box">box04</div>
</div>

CSS

#contents	{
	display: table;
	table-layout: fixed;
	width: 100%;
	max-width: 1024px;
	min-width: 480px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}
.box {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background-color: #52d3ff;
	color: #ffffff;
	padding: 30px 0;
}
.box:nth-child(2n) {
	background-color: #2fcaff;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 横一列に並ぶ複数要素を均等幅で配置する

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com