CSS自适应宽度的高级应用，一般人不会告诉你。

aaarticlea/png;base64,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" alt="" />

一行有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>