CSS雙飛翼佈局

時間 2019-11-06

標籤 css 雙飛佈局欄目 CSS 简体版

原文原文鏈接

此CSS是爲了實現三列布局：左右固定，中間自適應；且瀏覽器會自上而下先出現中間部分。html

html:
複製代碼

<body>
<!-- 使得瀏覽器先出來center -->
<div class="box">
	<div class="center">
		<!-- 建立一個div 開造 -->
		<div class="inner"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>
複製代碼

CSS:
複製代碼

<style>
	.box {
		width: 100%;
		height: 300px;
		background: darkblue;
		margin: 0 auto;
	}

	.center {
		width: 100%;
		height: 100%;
		float: left;
	}

	.inner {
		/* width: 100px;
		height: 100%;
		background: darkmagenta; */
		margin: 0;
	}

	.left {
		width: 100px;
		height: 100%;
		background: darkgoldenrod;
		float: left;
		margin-left: -100%;
	}

	.right {
		width: 100px;
		height: 100%;
		background: darkred;
		float: left;
		margin-left: -100px;
	}
</style>
複製代碼

最後效果出來是這樣的瀏覽器