流体方形分区（盒装尺寸问题）

Question

我目前正在尝试创建一个流量div，在页面调整大小时保持正方形。 这样做显然是可能的。

div{
    width:25%
    padding-bottom:25%;
}

但是，这仅适用于默认的箱型布局。 有没有办法在使用

时实现这一目标

box-sizing: border-box;

这是我当前html结构的代码笔：Code Pen

Answer 1

如果编辑HTML是一个选项：

• 将链接文字放在span绝对定位。
• 将left，right，top和bottom设置为0。

Updated Demo

<强> HTML

...
<a href="#"><span>Sed volutpat</span></a>
<a href="#"><span>Sed volutpat</span></a>
...

<强> CSS

...
a {
    position: relative;
    width: 80%;
    padding-bottom: 80%;
    ...
}
a span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    ...
}