这是我尝试过的:http://jsfiddle.net/5VTTD/,但它没有用.
这工作:http://jsfiddle.net/5VTTD/1/,但它使用Js.
@R_502_6120@ 你需要一个外部< div>作为一个容器,然后作为一个正方形的内部容器.我使用了50%的正方形尺寸,但你可以使用你想要的尺寸:它将相对于父< div>容器.
我还给它一个黑色的背景颜色来突出它:这里有一个DEMO.
诀窍在于padding-bottom:100%的父< div>.
CSS:
#container { position: relative; wIDth: 100%; padding-bottom: 100%;}#square { position: absolute; wIDth: 50%; height: 50%; background-color: #000000;}
HTML:
<div ID="container"> <div ID="square"> </div></div>总结
以上是内存溢出为你收集整理的html – div的高度=它的宽度,以百分比表示,因此div看起来像一个正方形,具有容器元素的非方形形状(仅限CSS)全部内容,希望文章能够帮你解决html – div的高度=它的宽度,以百分比表示,因此div看起来像一个正方形,具有容器元素的非方形形状(仅限CSS)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)