日期: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,这样文字就不会再被覆盖,大家可以测试一下