calc在布局中的使用

css3中增加了calc会计算的属性，那么我们也可以在我们的布局中合理的使用，这里我先抛出一个问题，大家可以思考一下，左右留20px的边距，中间的距离三等分，但是每个区域中间空出10px的距离，如下图：

calc在布局中的使用

这里我先说一下我的思路，我们就建一个wrapper，左右留20px的边距，然后在里面建三个div宽度为父级的(100%-20px)/3然后将第一个和第二个设置右边距10px即可。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>calc使用到布局中</title>
    <!--<link rel="stylesheet" href="styles.css"/>-->
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            margin:0 20px;
            height: 600px;
            background: grey;
        }
        .left,.center,.right{
            float: left;
            width: calc((100% - 20px)/3);
            height: 600px;
            background: blue;
        }
        .left,.center{
            margin-right: 10px;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

</body>
</html>

秒客网

calc在布局中的使用

相关文章