CSS高度等于相关宽度。

14 浏览
0 Comments

CSS高度等于相关宽度。

在这种情况下，我有一个如下的css：

.w{

width:80%;

display:block;

}

.d{

width:14%;

display:inline-block

}

这是我的html：

1

2

3

4

5

所以问题是，能否使.d的高度等于它的宽度？

我的意思是类似这样：height: 14% OF WIDTH。

我已经阅读了CSS的所有单位，但没有找到有用的信息。

0

1 答案

0 Comments

CSS中的height属性与宽度相关的问题是由于在设置元素宽度时，将其与视口的宽度相关联而导致的。解决方法是使用CSS中的vw单位来设置宽度和高度。

在上面的代码示例中，我们可以看到通过设置.w类的宽度为视口宽度的80%，将其与视口的宽度相关联。然后，通过设置.d类的宽度为视口宽度的11.2%，将它们的宽度与视口宽度相关联。并且，设置.d类的display属性为inline-block，使其在同一行内显示，并设置边框为1像素的红色边框。

在HTML中，我们可以看到.w类被应用于一个div元素，并包含了5个带有.d类的a元素。这些a元素的宽度和高度都与视口宽度相关联。

通过这种设置，我们可以实现元素的宽度与视口宽度的比例一致，从而实现CSS高度与相关宽度的效果。

总结起来，要解决CSS高度与相关宽度的问题，可以使用vw单位将元素的宽度与视口宽度相关联。这样可以实现元素宽度和高度的比例一致。

0