calc在布局中的使用

最新推荐文章于 2024-03-13 08:42:59 发布

cangowu

最新推荐文章于 2024-03-13 08:42:59 发布

阅读量580

点赞数

分类专栏： css 文章标签：前端 css

本文链接：https://blog.csdn.net/wzgdjm/article/details/50811920

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

cangowu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
calc在布局中的使用

css3中增加了calc会计算的属性，那么我们也可以在我们的布局中合理的使用，这里我先抛出一个问题，大家可以思考一下，左右留20px的边距，中间的距离三等分，但是每个区域中间空出10px的距离，如下图：这里我先说一下我的思路，我们就建一个wrapper，左右留20px的边距，然后在里面建三个div宽度为父级的(100%-20px)/3然后将第一个和第二个设置右边距10px即可。代码：
复制链接

扫一扫