兩欄式
Last updated
Last updated
操作範例
.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>@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;
}
@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;
}
@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;
}