display:table輕鬆實現等高佈局

時間 2019-11-17

標籤 display table 輕鬆實現等高佈局欄目 CSS 简体版

原文原文鏈接

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>display:table</title>

		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.main {
				display: table;
				border-collapse: collapse;
				/*爲表格設置合併邊框模型*/
			}
			
			.nav {
				display: table-cell;
				width: 180px;
				background: #999;
			}
			
			.extras {
				display: table-cell;
				width: 180px;
				padding-left: 10px;
				border-right: 5px solid red;
				background: #060;
			}
			
			.content {
				display: table-cell;
				width: 300px;
				padding-left: 10px;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<div class="header"></div>

			<div class="main">
				<div class="nav">靜安嘉</div>
				<div class="extras">空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的</div>
				<div class="content">阿瓦我ii啊啊啊<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的</div>

			</div>

		</div>

	</body>

</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。