使用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>