码迷,mamicode.com
首页 > 其他好文 > 详细

三栏布局,中间自适应,左右固定实现方法

时间:2016-02-16 11:27:37      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:

方法一:浮动

     <div class="container">
          <div class="content">hello</div>
          <div class="left"></div>
          <div class="right"></div>  
     </div>
 
     <style>
          .left{

               float:left;
               width: 200px;
               height: 300px;
               background: red;
          }
          .right{
               float: right;
               width: 200px;
               height: 300px;
               background: green;
          }
          .content{
               width: 100%;
               height: 300px;
               background: blue;
          }

     </style>
 
方法二:定位
       .left{
               width: 200px;
               height: 300px;
               background: red;
               position: absolute;
               left: 0;
               top: 0;

          }
          .right{
               width: 200px;
               height: 300px;
               background: green;
               position: absolute;
               right: 0;
               top: 0;

          }
          .content{
               width: 100%;
               height: 300px;
               background: blue;
               margin:0 200px;
          }
          .container{
               position:relative;
          }
 
方法三:display:box
          .left{
               width: 200px;
               height: 300px;
               background: red;
          }
          .right{
               width:200px;
               height: 300px;
               background: green;
          }
          .content{
               box-flex:1
               height: 300px;
               background: blue;
          }
          .container{
               display:box;
          }
 
 
 

三栏布局,中间自适应,左右固定实现方法

标签:

原文地址:http://www.cnblogs.com/yaliu/p/5191897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!