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>欢迎来踩
