CSS 三栏布局方法归纳

中间自适应，两边固定

1.用margin和float实现

css:


    * {
 margin: 0;
 padding: 0;
 text-align: center;
    }
    .left {
 float: left;
 width: 100px;
 background: yellow;
    }
    .right {
 float: right;
 width: 100px;
 background: green;
    }
    .center {
 margin: 0 100px;
 background: #ccc;
    }

html

    left
    right
    center

2.用float，margin负值实现

css


    * {
 margin: 0;
 padding: 0;
 text-align: center;
    }
    .left, .right, .center {
 float: left;
    }
    .left {
 width: 100px;
 margin-left: -100%;
 background: yellow;
    }
    .right {
 width: 100px;
 margin-left: -100px;
 background: green;
    }
    .center {
 width: 100%;
 background: #ccc;
    }

html

    center
    left
    right

3.用flex实现

css


    * {
 margin: 0;
 padding: 0;
 text-align: center;
    }
    .container {
 display: flex;
    }
    .left {
 width: 100px;
 background: yellow;
    }
    .right {
 width: 100px;
 background: green;
    }
    .center {
 flex: 1;
 background: #ccc;
    }

html

    left
    center
    right

中间固定，两边自适应

1. 用margin和float实现

css


    * {
 margin: 0;
 padding: 0;
 text-align: center;
    }
    .container {
 padding: 0 100px;
    }
    .left {
 float: left;
 width: 50%;
 margin-left: -100px;
 background: yellow;
    }
    .right {
 float: right;
 width: 50%;
 margin-right: -100px;
 background: green;
    }
    .center {
 float: left;
 width: 200px;
 background: #ccc;
    }

html

    left
    center
    right

2. 用flex实现

css


    * {
 margin: 0;
 padding: 0;
 text-align: center;
    }
    .container {
 display: flex;
    }
    .left {
 flex: 1;
 background: yellow;
    }
    .right {
 flex: 1;
 background: green;
    }
    .center {
 width: 200px;
 background: #ccc;
    }

html

    left
    center
    right

CSS 三栏布局方法归纳

CSS教程相关栏目本月热门文章