CSS经典三栏布局方案（6种方法）

时间：2017-12-05

第二步，将left的margin-left设置为-100%，此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值：-100px，则右栏也会移动到和左、中栏一行中：

CSS经典三栏布局方案（6种方法）

不过此时还没有大功告成，我们试着在main中加入一些文字：

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

CSS经典三栏布局方案（6种方法）

可以看到文字被压住了，接下来就要解决这个问题。

第三步，给container一个padding，该padding应该正好等于左、右栏的宽度：

        .container {
            padding-left: 100px;
            padding-right: 100px;
        }

此时看到的结果是左、中、右三栏都整体收缩了，但文字依然被压住了。

CSS经典三栏布局方案（6种方法）

第四步，给左、右两栏加上相对布局，然后再通过设置left和right值向外移动：

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

到此为止，大功告成：

CSS经典三栏布局方案（6种方法）

4. 双飞翼布局

双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：

既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: '';
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        background-color: blue;
    }   
    </style>
</head>
<body>
    <div class="main">
        <div class="content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

唯一需要注意的是，需要在main后面加一个元素来清除浮动。

5. flex布局

flex布局是趋势，利用flex实现三栏布局也很简单，不过需要注意浏览器兼容性：

        <style type="text/css">
            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }

            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }

            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

共3页:

2/3

上一篇：浅谈css3中calc在less编译时被计算的解决办法 下一篇：浅谈css3新单位vw、vh、vmin、vmax的使用详解

CSS经典三栏布局方案（6种方法）

相关文章

最新文章