兩欄式

操作範例

範例一、使用clear:both

css

.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;
 }

html

範例二、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;
}