display:tableのまとめ

floatを使用せず,table,tdのように簡単に横並びできる
display:table。

主な設定は親要素にdisplay:table。
子要素にdisplay:table-cellを付与する。

html

<section id="first">
<h2>display:table <span>-floatを使わない横並び-</span></h2>
<ul>
	<li>chapter01</li>
	<li>chapter02</li>
	<li>chapter03</li>
</ul>
<p>子要素の&lt;li&gt;にdisplay:table-cellを付与。<br>float無し。</p>
</section>

scss

section{
	background:#BAA2A2;
	margin: 30px 0 0 30px;
	padding: 15px;
	width: 550px;
	height: 300px;
	display: table;

h2{
border-left: 5px solid #4B1C1D;
padding-left: 0.6em;
color: #4B1C1D;

span{margin-left: 1em; font-size: 0.7em; color: #744849;}

}

ul{
 padding: 10px;
 border: 1px solid white;
}

li{
	height: 100px;
	padding: 15px;
	display: table-cell;
	}

li:nth-child(1){background: red; color: black;}
li:nth-child(2){background: blue; color: white;}
li:nth-child(3){background: green; color: yellow;}

ul,p{margin-top: 1em;}
}

/*　ここまでデフォルト記述。これ以降は省略　*/

#first{
	li{width: 170px;}
	}

html

<section id="second">
<h2> vertical-align:middle <span>-文字、画像のY軸位置を指定-</span></h2>
<ul>
	<li>chapter01</li>
	<li>chapter02</li>
	<li>chapter03</li>
</ul>
<p>子要素にvertical-align:middleを追記して<br>要素内中央に配置</p>
</section>

scss

#second{
	li{width: 170px; 
	   vertical-align: middle;
	   }
	}

↓

親要素の幅が変わると中央は可変。左右は固定の幅を維持する。


html

<section id="third">
<h2>リキッドレイアウト<span>-幅を指定しない-</span></h2>
<ul>
	<li>80px固定幅</li>
	<li>要素の幅が指定されてないとリキッドになります。</li>
	<li>80px固定幅</li>
</ul>
<p>左右をwidth(幅)を指定,真ん中のみ指定しないと可変リキッドになる</p>
</section>

scss

section#third{
	width: auto;
	max-width: 650px;
	li:nth-child(1),li:nth-child(3){width:80px;}
	}

↓

親要素の幅が変わっても、それに併せて均等の幅に


html

<section id="fourth">
<h2>table-layout: fixed <span>-均等幅-</span></h2>
<ul>
	<li>chapter01</li>
	<li>chapter02</li>
	<li>chapter03</li>
</ul>
<p>親要素&lt;ul&gt;にtable-layout: fixed;とwidht(幅)を指定すれば、子要素&lt;li&gt;が均等幅割り付けされる。</p>
</section>

scss

#fourth{
	max-width: 650px;
	width: auto;
	ul{
display:table;
table-layout: fixed;
width:95%;
}
	}