calc在布局中的使用

来源：互联网发布：js换行代码编辑：程序博客网时间：2024/05/17 06:01

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

这里我先说一下我的思路，我们就建一个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>

0 0