给定宽度，不用height画出正方形

最新推荐文章于 2022-03-10 11:43:34 发布

fullstack_lth

最新推荐文章于 2022-03-10 11:43:34 发布

阅读量573

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/u014744118/article/details/103855814

版权

CSS 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 500px;
            height: 500px;
            font-size: 0;
            text-align: center;
        }

        div {
            display: inline-block;
            width: 20%;
            position: relative;
        }

        div:nth-child(2n) {
            background: chartreuse;
        }

        div:nth-child(2n+1) {
            background: aqua;
        }

        div:before { 
            content: "";
            display:inline-block;
            padding-bottom: 100%;
            width: 0.1px;
        }

        /* < !-- padding-%:规定基于父元素的宽度的百分比的内边距。 --> */
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</body>

</html>

以上代码思路根据大漠在知乎的一个回答改写，思路大致是一致的，就是利用padding-bottom的特性：基于父元素宽度的百分比的内边距。原回答：

https://www.zhihu.com/question/31753528/answer/53213721

fullstack_lth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
给定宽度，不用height画出正方形

body{width:100%;font-size:0;text-align:center;}div{display:inline-block;width:20%;position:relative;&:before{content:"";...
复制链接

扫一扫