兩欄式

操作範例

範例一、使用clear:both


.wrap { background-color: pink; width: 500px;
 margin-left: auto; margin-right: auto; }
.clearFix { display: block; clear: both; }
.navi, .main { float: left; }
.navi { 
   background-color: yellowgreen;
   width: 100px;
 }
.main { 
     background-color: gray; 
     width: 400px;
 }

<body>
	<div class="wrap">
		<div class="navi">
			<p>左邊</p>
			<p>左邊</p>
			<p>左邊</p>
		</div>
		<div class="main">
			<p>右邊</p>
			<p>右邊</p>
			<p>右邊</p>
			<p>右邊</p>
			<p>右邊</p>
			<p>右邊</p>
			<p>右邊</p>
		</div>
		<span class="clearFix"></span>
	</div>
</body>

範例二、margin

@charset "utf-8";

.wrap {
	background-color: pink;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.navi {
	float: left;
	width: 100px;
	background-color: yellowgreen;
}

.main {
	margin-left: 100px;
	background-color: gray;
}

範例三、float

@charset "utf-8";

.wrap {
	background-color: pink;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.navi, .main {
	float: left;
}

.navi {
	background-color: yellowgreen;
	width: 100px;
}

.main {
	background-color: gray;
	width: 400px;
}

範例四、 after、 before

@charset "utf-8";

.wrap {
	background-color: pink;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.wrap::after {
	content: "";
	display: block;
	clear: both;
}

.navi, .main {
	float: left;
}

.navi {
	background-color: yellowgreen;
	width: 100px;
}

.main {
	background-color: gray;
	width: 400px;
}

Previous三欄式 - 範例 Nextcss命名規則

Last updated 4 years ago

Was this helpful?