CSS-布局1-浮动三列布局

2017-06-17 本文已影响0人 Java小工匠

1、三列布局需求

网页中，常见的实现3列布局，左右两边宽宽固定，中间自适应的布局。本节介绍一种，最简单的实现思路，利用div浮动特性实现。

2、实现思路

在网页中依次编写 left、right、center 三个div，注意一定要左右中，这样的编写顺序。让left的div向左浮动，让right的div向右浮动。同时设置Center的左边距，和右边距，这样就实现了一个三列布局。

3、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .left{
            width:200px;
            height:600px;
            float:left;
            border: 1px solid red;
        }
        .right{
            width:200px;
            height:600px;
            border: 1px solid blue;
            float: right;
        }
        .center{
            height:600px;
            background :gray;
            margin-left: 202px;
            margin-right: 202px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>
</html>

4、运行效果

三列布局运行效果

5、布局缺陷

（1） center 区的渲染，在left和right之后，用户体验不好。