padding-bottom诀窍是最常用的技巧。
您可以将其与Flexbox和CSS Grid结合使用，由于对利润/填充使用百分比会导致弹性/网格项目的结果不一致，因此可以添加一个额外的包装器，或者在此处使用伪类，因此带有百分比的元素
不会弹性/网格项目。
编辑：请注意，对规格进行了更新。，现在在弹性/网格项目上使用时应能提供一致的结果。但是请注意，该问题
在较旧的版本上仍然会发生。
请注意，如果要向content元素添加内容，则它必须是绝对位置，以保持正方形的纵横比。
.square-container { display: flex; flex-wrap: wrap;}.square { position: relative; flex-basis: calc(33.333% - 10px); margin: 5px; border: 1px solid; box-sizing: border-box;}.square::before { content: ''; display: block; padding-top: 100%;}.square .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%;}<div > <div > <div > </div> </div> <div > <div > </div> </div> <div > <div > </div> </div> <div > <div > </div> </div> <div > <div > </div> </div></div>CSS Grid version
.square-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); grid-gap: 10px;}.square { position: relative; border: 1px solid; box-sizing: border-box;}.square::before { content: ''; display: block; padding-top: 100%;}.square .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%;}<div > <div > <div > </div> </div> <div > <div > </div> </div> <div > <div > </div> </div> <div > <div > </div> </div> <div > <div > </div> </div></div>
