css display:table left、right div不再長短腳 (pure CSS make float div same height)

在做float div的時候常常因為左右邊的內容不一樣多造成div不能一樣高,這篇提供一個解決方案,只要利用display屬性就可以達成左右一樣就的效果。
<preview>

<html>

<div class="outside">
	<div class="box">
		<p>這是左邊內容</p>
		<p>這是左邊內容</p>
		<p>這是左邊內容</p>
		<p>這是左邊內容</p>
		<p>這是左邊內容</p>
	</div>
	<div class="box">
		<p>這是右邊內容</p>
		<p>這是右邊內容</p>
		<p>這是右邊內容</p>
	</div>
</div>

<CSS>

.outside {
	overflow: auto;
	display: table;
	width: 80%;
	margin: 0 auto;
}
.box {
	border: 1px solid;
	display: table-cell;
}

<download demo>
CLICK HERE

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *