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

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

 

posted @ 2016-08-30 15:44  godok  阅读(3166)  评论(0)  编辑  收藏  举报