使用float会使块级元素的宽高表现为包裹内容(在不设定宽高的情况下) 这是当然的 我们使用float就是使几个div排在一行 当然不可能在宽度上撑满父元素啦 至于高度 不论有没有float 高度默认都是包裹元素的
有这么一道题
现有并列的三列布局结构，从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度100%），不能使用针对浏览器的CSS Hack.
<!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>Untitled Document</title> <style type="text/css"> .content{ position: relative; width: 960px; height: 50px; margin: 10px; } .a{ width: 180px; background-color: red; } .b{ width: 600px; background-color: green; } .c{ width: 180px; background-color: blue; } .a1{ float: left; } .b1{ float: left; } .c1{ float: right; } .a2{ float: right; } .b2{ float: right; } .c2{ float: left; } .a3{ position: absolute; left: 600px; } .b3{ float: left; } .c3{ float: right; } .a4{ position: absolute; left: 81.25%; top:0px; } .b4{ width: auto; position: relative;/*设定了position 在此基础上才能加上left right等 这个值表示相对于普通流的位置作偏移====> 因此有可能超出父元素 这个设定了position说的是除了static之外的position static是默认position PS left right只能同时使用一个 top bottom 也是*/ margin-left: 18.75%;/*为a和c的显示预留空间*/ margin-right: 18.75%;/*为a和c的显示预留空间*/ } .c4{ position: absolute;/*脱离了文档流 相对于父元素作偏移 */ /*关于position可以参考http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html*/ /*以及http://www.cnblogs.com/coffeedeveloper/p/3145790.html*/ left: 0%; top: 0px; } </style> </head> <body> 实现abc排列 <div class='content'> <div class='a a1'>a</div> <div class='b b1'>b</div> <div class='c c1'>c</div> </div> 实现cba排列 <div class='content'> <div class='a a2'>a</div> <div class='b b2'>b</div> <div class='c c2'>c</div> </div> 实现bac排列 <div class='content'> <div class='a a3'>a</div> <div class='b b3'>b</div> <div class='c c3'>c</div> </div> cba排列 同时b自适应宽度 <div class='content'> <div class='a a4'>a</div> <div class='b b4'>b</div> <div class='c c4'>c</div> </div> </body> </html>