为何css宽度与高度不相同?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (47)

我试过了但没用。

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

宽度与窗口宽度相关(以百分比为单位)。我想使宽度等于百分之一的高度,并且只使用CSS。

请帮忙。

提问于
用户回答回答于

提供你可以更改的标记。你可以添加另一个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>

扫码关注云+社区

领取腾讯云代金券