<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div + css宽度自适应（液态布局）</title>
<style type="text/css">
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}
/*左边栏，设定宽度*/
.wrap_l{float:left;background:#FF0000; height:300px;width:150px;border:1px solid #333;}
/*右边栏，固定宽度*/
.wrap_m{width:auto;background:#de159d;height:300px;border:1px solid #000; }
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_m">
这是右边部分<br />
这是右边部分<br />
这是右边部分<br />
</div>
</div>
</body>
</html>
来源：https://www.cnblogs.com/xiaoleidiv/p/3424764.html