calc在布局中的使用

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

cangowu

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

阅读量631

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/wzgdjm/article/details/50811920

css 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了如何在CSS3布局中合理利用calc()属性实现特定效果，通过实例展示了左右留20px边距，中间三等分并空出10px间隔的布局方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>