左侧固定右侧自适应布局

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

---

左侧固定右侧自适应布局

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

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

话不多说 直接上代码。

html:

<div class="content">
    <div class="left">
        <p>左侧定宽</p>
    </div>
    <div class="right">
        <div class="right-con">
            <p>右侧自适应</p>
        </div>
    </div>
</div>

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% 因为左侧元素浮动高度塌陷。所以右侧元素上浮。

原文地址：<a href="http://blog.jimliu.xyz/2016/11/21/Template-literals/">Jimliu写字的地方</a>欢迎来踩