css高度，宽度 自顺应规划
日期：2013-05-09 浏览次数：21160 次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
*{
margin:0;
padding:0;
color:#FFF;
}
.a{
background:#FF0000;
width:100%;
float:left;
margin-right:-100px;
}
.b{
background:#006699;
width:100px;
float:right;
}
.c{
background:#006666;
margin-right:100px;
}
</style>
</head>
<body>
<div class="a"><div class="c">左</div></div><div class="b">右</div>
</body>
</html>
上面代码是右侧固定宽度，左侧自顺应宽度，margin-right:-100px 也说明了浮动元素的尺寸是受margin影响的，上面a的宽度 就是100%宽度再减去 100px
这里自顺应是利用的浮动元素的尺寸可以通过margin来调整，如果给予margin-right负值，那么右侧将会裁去相应的宽度，这样就给右侧的固定宽度规划留出了相反大小的空间
这样视觉上是右侧固定浮动，左侧自顺应的浮动，但是理想上如果没有c元素，而是直接把文字放到a中，文字是会跑到b的下面去的，所以我给a里面加上了c，并且不指定宽度，水平右侧外边距给100px，这样文字就不会再被覆盖，大家可以测试一下
