三欄式 - 範例
範例一、Float
<body>
<div class="wrapper">
<div class="header">頁首</div>
<div class="navi">
<ul>
<li><a href="javascript:;">導覽</a></li>
<li><a href="javascript:;">導覽</a></li>
<li><a href="javascript:;">導覽</a></li>
<li><a href="javascript:;">導覽</a></li>
<li><a href="javascript:;">導覽</a></li>
</ul>
</div>
<div class="main">
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
<p>內容</p>
</div>
<div class="sidebar">
<p>側邊欄</p>
<p>側邊欄</p>
<p>側邊欄</p>
<p>側邊欄</p>
</div>
<div class="footer">頁尾</div>
</div>
</body>
*::before, *::after, * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
.header {
background-color: aquamarine;
}
.navi, .main, .sidebar {
float: left;
}
.navi {
width: 20%;
background-color: blanchedalmond;
}
.main {
width: 60%;
background-color: coral;
}
.sidebar {
width: 20%;
background-color: darkgray;
}
.footer {
clear: both;
background-color: darkkhaki;
}
/*# sourceMappingURL=all.css.map */
範例二、width
@charset "utf-8";
*,
*::before,
*::after {
box-sizing: border-box;
}
.wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
.header {
background-color: aquamarine;
}
.navi,
.main,
.sidebar {
float: left;
}
.navi {
width: 20%;
background-color: blanchedalmond;
}
.main {
width: 60%;
background-color: coral;
}
.sidebar {
width: 20%;
background-color: darkgray;
}
.footer {
background-color: darkkhaki;
clear: both;
}
.container {
overflow: hidden;
}
範例三、clear
@charset "utf-8";
*,
*::before,
*::after {
box-sizing: border-box;
}
.wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
.header {
background-color: aquamarine;
}
.navi,
.main,
.sidebar {
float: left;
}
.navi {
width: 20%;
background-color: blanchedalmond;
}
.main {
width: 60%;
background-color: coral;
}
.sidebar {
width: 20%;
background-color: darkgray;
}
.footer {
background-color: darkkhaki;
}
.clearFix{
display: block;
clear: both;
}
範例四、after
@charset "utf-8";
*,
*::before,
*::after {
box-sizing: border-box;
}
.wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
.header {
background-color: aquamarine;
}
.navi,
.main,
.sidebar {
float: left;
}
.navi {
width: 20%;
background-color: blanchedalmond;
}
.main {
width: 60%;
background-color: coral;
}
.sidebar {
width: 20%;
background-color: darkgray;
}
.footer {
background-color: darkkhaki;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
Last updated