html - CSS 高度等于相关宽度

Question

在这种情况下，我有一个这样的 CSS:

.w{
    width:80%;
    display:block;
}

.d{
    width:14%;
    display:inline-block
}

这是我的html

<div class="w">
    <a href="#" class="d">1</a>
    <a href="#" class="d">2</a>
    <a href="#" class="d">3</a>
    <a href="#" class="d">4</a>
    <a href="#" class="d">5</a>
</div>

所以问题是，是否有可能使 .d 的高度等于它的宽度？我的意思是:height: 14% OF WIDTH。我已经阅读了所有 css 单元 here , 但我找不到任何有用的东西

Answer 1

如果你不能用 javascript 做到这一点，并且你可以将宽度与视口(viewport)相关联，你可以将宽度和高度设置为视口(viewport)宽度的相同百分比

.w{
    width:80vw;
    display:block;
}

.d{
    width:11.2vw;
    display:inline-block;
    border:1px solid red;
    height:11.2vw;
}

<div class="w">
    <a href="#" class="d">1</a>
    <a href="#" class="d">2</a>
    <a href="#" class="d">3</a>
    <a href="#" class="d">4</a>
    <a href="#" class="d">5</a>
</div>