CSSサンプル / display:inline-table

先の要素です。

先の要素です。

■CSS記述例

div.sample p.p1 {
	display:inline-table;
	width:100px;
	padding:10px;
	margin:0;
	background-color:green;
	color:#FFFFFF;
}

div.sample div.p1 {
	display:inline-table;
	width:300px;
	padding:10px;
	margin:0;
	background-color:#0099FF;
	color:#FFFFFF;
}

div.sample p.p2 {
	display:inline-table;
	width:100px;
	padding:10px;
	margin:0;
	background-color:green;
	color:#FFFFFF;
}

div.sample div.p2 {
	display:inline-table;
	width:300px;
	padding:20px;
	margin:0;
	background-color:#0099FF;
	color:#FFFFFF;
	vertical-align:top;
}

■HTML記述例

<p class="p1">先の要素</p>
<div class="p1">後の要素</div>
<br />
<p class="p1">先の要素</p>
<div class="p1">後の要素</div>