文章詳情頁
css - calc()設置寬度等于自身的高度?
瀏覽:262日期:2023-07-22 16:10:56
問題描述
代碼如下:
p{ height: 50vw; width: -moz-calc(height); width: -webkit-calc(height); width: calc(height); background:#c7c7c7;}
控制臺輸出結果

calc() 沒有這種用法嗎 如果沒有 該如何讓自身寬度等于自身高度呢?
問題解答
回答1:calc里面不能直接用height,要是高度和寬度相等有以下三種方法:
p{ width:20vw; /* viewport 的20% */ height:20vw; background-color:green; margin-bottom:20px;}
2.
p{ width:20%; padding-top:20%; /* padding相對于父容器的寬度作為對比 */ background-color:yellow; margin-bottom:20px;}
3.
p{ width: 20%; background-color:orange;}p:before{ content:’’; padding:50% 0;/* 此時padding相對于width:20%; */ display:inline-block;}
參考:演示
標簽:
CSS
相關文章:
1. mac里的docker如何命令行開啟呢?2. 為什么我ping不通我的docker容器呢???3. nignx - docker內nginx 80端口被占用4. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””5. docker容器呢SSH為什么連不通呢?6. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題7. angular.js使用$resource服務把數據存入mongodb的問題。8. javascript - 最近用echarts做統計圖時遇到兩個問題!!9. docker 下面創建的IMAGE 他們的 ID 一樣?這個是怎么回事????10. docker gitlab 如何git clone?
排行榜

網公網安備