三栏水平布局（CSS）

如何用css实现三栏水平布局？

主要就是将页面分为三部分：left、right、main。

接下来我们来看css代码：

<style>
    .container{
        width: 100%;
        height: 600px;

    }
    .left{
        position: absolute;
      left: 0px;
        background-color: #558888;
        width: 200px;
        top: 0px;
        height:600px;
    }
    .right{
        position: absolute;
        background-color: peachpuff;
        right: 0px;
        width: 300px;
        top: 0px;
        height: 600px;

    }
    .main{
        width: auto;
        background-color: greenyellow;
        margin-left: 200px;
        margin-right: 300px;
        top: 0px;
        height: 600px;

    }
</style>

在这里我先定义了一个container选择器，作用是定义最大宽度和高度，相当于一个容器。然后分别定义left、right、main。

html代码：

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

将定义的选择器分别在div块层中引用，最终效果图：