网页设计之自适应三栏布局

所谓自适应三栏布局，即左右两边固定，中间自适应。在这里给大家介绍两种方法，一种是利用float浮动，另一种则是利用弹性盒子。

1、

        html代码：

<div class="left">1</div>

<div class="cen">2</div>

<div class="right">3</div>

        css代码： 

 

*{

            padding: 0;

            margin: 0;

  }

 html,body{

            height: 100%;

}

 .left,.right{

            width: 300px;

            height: 100%;

            background: springgreen;

            float: left;

 }

 .cen{

            width:calc(100% - 600px);

            height: 100%;

            background: red;

            float: left;

 }

2、

         html代码：

<div class="contain">

        <div class="left">1</div>

        <div class="cen">2</div>

        <div class="right">3</div>

</div>

        css代码： 

*{

            padding: 0;

            margin: 0;

}

html,body{

            height: 100%;

}

.contain{

            height: 100%;

            display: flex;

}

.left,.right{

            width: 300px;

            height: 100%;

            background: springgreen;

}

.cen{

            flex:1;

            height: 100%;

            background: red;

}

效果图：