clearfix,display;table - paris1204の日記

clearfix
floatを解除する手法のclearfix と次世代のレイアウトの話｜Web Design KOJIKA17

display:table；
要素をトップ、ミドル、ボトムの３種類に配置することができ、コンテンツの量が変化しても自動的に位置を調整してくれる

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>clearFix、display:tableの書き方</title>
	<style>
		*{margin:0;
			padding:0;}

			li{list-style: none;}

.box{width:980px;
	padding:50px;
margin:20px auto;
background: pink;}


.box ul.inline li{display:inline;
padding-right:30px;}


/*clearfix*/
.box .inner:after{content:"";
display:block;
clear:both;}

.box .inner ul.clearfix li{width:20%;
float:left;}


/*table*/
div.tablebox{width:980px;
height:600px;
margin:20px auto;
background:#000;
display:table;
}

div.tablebox ul.tablecell{display:table-cell;
vertical-align: middle;
text-align:center;
/*vertical-align: :top;
vertical-align: bottom;*/
color:white;}










	</style>
</head>
<body>

<div class="box">
<ul class="inline">
	<li>display:inline</li>
	<li>display:inline</li>
	<li>display:inline</li>
	<li>display:inline</li>
	<li>display:inline</li>
</ul>

	

</div><!-- .box -->


<div class="box">
<div class="inner">
<ul class="clearfix">
	<li>clearfix</li>
	<li>clearfix</li>
	<li>clearfix</li>
	<li>clearfix</li>
	<li>clearfix</li>
</ul>

	
</div><!-- .inner -->
</div><!-- .box -->


<div class="tablebox">
	<ul class="tablecell">
		<li>tableCell</li>
		<li>tableCell</li>
		<li>tableCell</li>
		<li>tableCell</li>
		<li>tableCell</li>
	</ul>
</div>
	
</body>
</html>