左侧固定右侧自适应布局

title: 左侧固定右侧自适应布局
date: 2016-06-08 22:07:19
tags: ['css']

---

左侧固定右侧自适应布局

在web管理平台中左侧固定右侧自适应的布局非常常见。就像 这样。。。

（好吧我承认这样有点难看。）

话不多说 直接上代码。

html:

    

        
左侧定宽
    
    

        

            
右侧自适应
        
    

css:

.left{
    position:relative;
    float:left;
    width:190px;
    margin-right:-190px;
}
.right {
    float: right;
    width: 100%;
}
.right-con {
    margin-left: 200px;
}

但是今天又发现了一个新的方法。。而且 我不知道是为什么。。

css:

.left {
    float: left;
    width: 190px;
}
.right {
    margin-left: 200px;
}

页面上div默认宽度是100% 因为左侧元素浮动高度塌陷。所以右侧元素上浮。

原文地址：Jimliu写字的地方欢迎来踩