巧妙的利用css中的margin进行页面折行布局法

weixin_43993776

于 2023-07-10 15:37:45 发布

阅读量126

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_43993776/article/details/131640171

版权

巧妙的利用margin做页面折行布局发法

想要实现如下的页面布局，利用 margin可以轻松的实现在这里插入图片描述

方法一：边上的元素留有距离

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0; padding: 0;
        }
        li{
            list-style: none;
        }
        html, body{
            height: 100%;
            width: 100%;
        }

        ul{
            display: flex;
            flex-wrap: wrap;
            padding-top: 20px;
        }
        ul li{
            /*calc里面的一行展示3个元素，3个元素就是6个margin， 所以除以6*/
            margin: 0 calc((100% - 500px * 3) / 6) 20px;
            border: 1px solid #ccc;
            width: 500px;
            height: 300px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

方法二：边上的元素没有距离

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0; padding: 0;
        }
        html, body{
            height: 100%;
            width: 100%;
        }

        .container{
            display: flex;
            flex-wrap: wrap;
            padding-top: 40px;
        }
        .container .item{
            width: 400px;
            height: 300px;
            background: #0e9b9d;

            /* 利用margin进行页面折行布局， calc里面的计算方式是： 100%减去（一行放几个元素就是几个元素的宽度和）然后除以（放几个宽度的margin距离） */
            margin: 0 calc((100% - 4 * 400px) / 6) 20px;
        }
        /*下面的两行代码是去掉最左面的margin-left和最右面的margin-right的距离 注意去掉下面的两行代码之后上面的calc里面的除以 6 就得需要变成除以 8 了 */
        .container .item:nth-child(4n){
            margin-right: 0;
        }
        .container .item:nth-child(4n + 1){
            margin-left: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

weixin_43993776

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
巧妙的利用css中的margin进行页面折行布局法

*下面的两行代码是去掉最左面的margin-left和最右面的margin-right的距离注意去掉下面的两行代码之后上面的calc里面的除以 6 就得需要变成除以 8 了 *//* 利用margin进行页面折行布局， calc里面的计算方式是： 100%减去（一行放几个元素就是几个元素的宽度和）然后除以（放几个宽度的margin距离） *//*calc里面的一行展示3个元素，3个元素就是6个margin，所以除以6*/想要实现如下的页面布局，利用 margin可以轻松的实现。
复制链接

扫一扫