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

最新推荐文章于 2024-06-25 22:50:37 发布

weixin_30298497

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量211

点赞数

原文链接：http://www.cnblogs.com/godok/p/5822297.html

版权

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

转载于:https://www.cnblogs.com/godok/p/5822297.html

weixin_30298497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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来减少自己内容宽度，避免内容与...
复制链接

扫一扫