文章詳情頁
css3 - 純CSS實(shí)現(xiàn)寬度是百分比的元素成為一個(gè)正方形，適配各種屏幕？
瀏覽：104日期：2023-07-26 08:08:31
問題描述
如題，一個(gè)p,設(shè)置width:30%,如何讓它的高度和寬度一樣大小，并且隨著寬度的變化而變化？
前提：不使用js代碼
<body> <p style=’width:30%’></p></body>
問題解答
回答1：<body>
<p style='width:30%;padding-bottom:30%;height:0px;background:#ccc;'></p>
</body>
設(shè)置高度為0,防止有內(nèi)容時(shí)高度溢出
回答2：<body> <p style=’width:30vw; height:30vw;’></p></body>
回答3：<body> <p style='width:30%;position:relative;overflow:auto;'><img src='http://www.lshqa.cn/wenda/一張與背景相同或透明的正方形圖片' style='width:100%;'><p style='position:absolute;top:0;left:0;'> 文字內(nèi)容</p> </p></body>
標(biāo)簽：
CSS
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備