日期:2013-05-09 浏览次数:21135 次
<!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,这样文字就不会再被覆盖,大家可以测试一下