html - Fluid Square Divs（Box-Sizing 问题）

Question

我目前正在尝试创建一个在调整页面大小时保持方形的流体 div。这显然可以通过做这样的事情来实现。

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

然而，这只适用于默认的盒子模型布局。有没有办法在使用时实现这一点

box-sizing: border-box;

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

Answer 1

如果编辑 HTML 是一个选项：

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

更新的演示

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;
    ...
}