三栏布局的几种方式

1.流体布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    /*左右浮动,中间margin或者overflow*/
    /*缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验。*/
    .left {
        float: left;
        height: 200px;
        width: 100px;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: right;
    }
    .main {
        margin-left: 100px;
        margin-right: 200px;
        /*或者overflow: hidden;或者auto*/
        height: 200px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

2.圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*要点:父元素设置margin左右,main宽度100%,然后left和right都设置margin-left左移到同一排*/
        .container {
            margin-left: 100px;
            margin-right: 200px;
        }
        .main {
            float: left;
            width: 100%;
            height: 300px;
            background-color: red;
        }
        .left {
            float: left;
            width: 100px;
            height: 300px;
            margin-left: -100%;/*左移100%,使left和main在同一行*/
            position: relative;
            left: -100px;/*左移100px,与container的margin-left相对应。使元素响应地靠左排列*/
            background-color: blue;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -200px;/*左移自身宽度,使right和main在同一行*/
            position: relative;
            right: -200px;/*右移200px,与container的margin-right相对应。使元素响应地靠右排列*/
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div><!--先写主体内容,优先渲染-->
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3.双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*要点:全部都浮动,然后margin-left位移到同一排*/
        .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 100px;
            margin-right: 200px;
            background-color: green;
        }
        .left {
            float: left;
            height: 200px;
            width: 100px;
            margin-left: -100%; 
            background-color: red;
        }
        .right {
            width: 200px;
            height: 200px;
            float: right;
            margin-left: -200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="main"></div><!--先写主体内容,优先渲染-->
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

4.flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*缺点:新技术要考虑浏览器兼容*/
        .container {
            display: flex;
        }
        .main {
            flex: 1;
            height: 300px;
            background-color: red;
        }
        .left {
            order: -1;/*排最左*/
            flex-basis: 200px;/*分配空间*/
            height: 300px;
            background-color: blue;
        }
        .right {
            flex-basis: 100px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

5.绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .container {
        position: relative;
    }
    .main {
        height: 300px;
        margin: 0 100px;
        background-color: green;
    }
    .left {
        position: absolute;
        width: 100px;
        height: 300px;
        left: 0;
        top: 0;
        background-color: red;
    }
    .right {
        position: absolute;
        width: 100px;
        height: 300px;
        background-color: blue;
        right: 0;
        top: 0;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

6.table布局

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*缺点:无法设置栏间距,也无法优先加载内容*/
        .container {
            display: table;
            width: 100%;
        }
        .left,
        .main,
        .right {
            display: table-cell;
        }
        .left {
            width: 200px;
            height: 300px;
            background-color: red;
        }
        .main {
            background-color: blue;
        }
        .right {
            width: 100px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>

</html>

 

posted @ 2017-07-22 16:41  森森森shen  阅读(427)  评论(0编辑  收藏  举报