三欄式 - 範例

範例一、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>

範例二、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;
}
Previous置中篇 - 範例Next兩欄式

Last updated

Was this helpful?