一行有5列，第2、4列宽度150px，其他3列平均分配剩下的宽度：
思路：设置1、3、5宽度为33.33%-100px，3列的宽度就是99.99%-300px，再加上2、4列的宽度和300px，5列的宽度和≈100%，用这个思路可以应付各种复杂的自适应布局。
方法：但是宽度没有33.33%-100px这种写法，所以要用marging减少宽度，还要padding来减少自己内容宽度，避免内容与旁边的重叠
注意：box-sizing: border-box;这个属性是保证宽度不受padding影响
<!doctype html> <html> <head> <meta charset="utf-8"> <title>col</title> </head> <style> html,body{padding:0; margin:0} div{ float:left; word-break:break-all} .c2{width:150px;background:#FCF;} .c4{width:150px;background:#0CF;} .c1,.c3,.c5{ width:33.33%; -webkit-box-sizing: border-box; box-sizing: border-box; } .c3,.c5{ margin-left:-100px; padding-left:100px; } .c1{ margin-right:-100px; padding-right:100px; } </style> <body> <div class="c1">111111111111111111111111111111111111111111111111</div> <div class="c2">2222222222222222222222222222</div> <div class="c3">333333333333333333333333333333333333333333333333</div> <div class="c4">4444444444444444444444444444</div> <div class="c5">555555555555555555555555555555555555555555555555</div> </body> </html>