流體正方形div（盒子大小問題）

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