设为首页|加入收藏 精品推荐:

CSS基础:三栏布局问题

来源:未知 | 作者:技术小白 | 点击:
CSS基础:三栏布局问题
三栏布局问题(左右固定宽度 中间自适应)
 
1.float + margin(浮动布局)
 
<div class="container">
    <div class="left">Left</div>
     <!-- 右栏部分要写在中间内容之前 -->
    <div class="right">Right</div>
    <div class="main">Main</div>
</div>
 
 
body,html,.containerl{
    height: 100%;
    padding:0;
    margin: 0;
}
/*左边栏左浮动*/
.left{
    float:left;
    height:100%;
    width:200px;
    background:#333;
}
/*中间栏自适应*/
.main{
    height:100%;
    margin:0 200px;
    background: red;
}
/*右边栏右浮动*/
.right{
    float:right;
    height:100%;
    width:200px;
    background:#333;
}
优点:快捷 简单 兼容性较好
缺点: 有局限性 脱离文档流 需要清除浮动等

您可能对以下内容感兴趣

小编分享

  • 广告位一
  • 广告位二
  • 广告位三
  • 广告位四
  • 广告位五

最新评论文章

回到顶部