css宽度与高度不一致

问题描述：

div { 
    background:orange; 
    height:20%; 
    padding-left:20%; 
}

宽度与百分比窗口宽度相关。我想使宽度与百分比值中的高度相等，并只用css来完成。

here在那里我得到了

任何帮助，请。

你允许使用width属性？如果是这样的话，你在链接中给出了使用vw单位的一些非常酷的答案。 – semuzaboi

不，我不想使用vw单位，但非常感谢 – phoenix

答

提供你可以改变标记，你可以添加另一个div，并添加一些伪元素来实现。使用下面的标记。

<div class="parent"> 
<div class='child'></div> 
</div>

div.child { 
 
    background: orange; 
 
    height: 20%; 
 
    margin-right: 80%; 
 
} 
 
.child:after { 
 
    content: ""; 
 
    display: block; 
 
    padding: 50% 0%; 
 
} 
 
div.parent { 
 
    width: 100%; 
 
    height: 100%: 
 
}

<div class="parent"> 
 
    <div class='child'></div> 
 
</div>

，现在我明白了。 – phoenix

css宽度与高度不一致

相关推荐