CSS关于DIV宽高比的问题求教大神在线等_框架

<body>

<div style="width:100%; height: 60%; border-top: 1px solid red;">1

</div>

<div style="width:100%; height: 25%; border-top: 1px solid red;">2

</div>

<div style="width:100%; border-top: 1px solid red;">3

</div>

</body>

用padding设置百分比，会根据父元素的宽度来实现

</div>parent{width:200px;height:100px;}

div{width:100%;height:0;padding-bottom:50%;}

以 4:3 为例, 想要DIV按照这个宽高比,在网页中随着横向的伸缩,在纵向上等比伸缩, 用一个外围DIV来包裹它,且将这个外围DIV称之为Wrapper, Wrapper 的CSS样式如下:

这个Wrapper的宽高比就是 4:3 , 其中的奥妙就在于 padding-bottom:75% , padding-bottom 是相对宽度的也就是整个Wrapper的高度等于 padding-bottom 的高度,Wrapper 没有内容高度没有内容高度如何往其中放置我们准备的DIV呢答案是 绝对定位 , 所以Wrapper的样式中有 position:relative , 方便子元素相对Wrapper的左顶点定位

最后我们把想要保持宽高比的DIV放到Wrapper中去, 这个DIV且称之为Inner, 下面是这个Inner的CSS样式:

结束

以上就是关于CSS关于DIV宽高比的问题求教大神在线等全部的内容，包括:CSS关于DIV宽高比的问题求教大神在线等、如何设置一个div使其宽高比为3:4如下、HTML中保持DIV宽高比等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/9678558.html

CSS关于DIV宽高比的问题求教大神在线等

发表评论

评论列表（0条）