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

我会带着你远行 2023-06-27 11:15 4阅读 0赞

<!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][https_www.zhihu.com_question_31753528_answer_53213721]

[https_www.zhihu.com_question_31753528_answer_53213721]: https://www.zhihu.com/question/31753528/answer/53213721