CSS - 具有完美正方形的网格[重复]答案

【问题标题】：CSS - Grid with perfect squares [duplicate]CSS - 具有完美正方形的网格[重复]
【发布时间】：2011-03-25 15:39:57
【问题描述】：

在生成完美正方形网格时需要一些 CSS 帮助。 Div 看起来像这样，但我想让它们看起来像一个完美的正方形 - 而不是矩形。在 css 中设置宽度和高度不会这样做。 :-\

<div class="square" /> ... <div class="square" /> <div class="linebreak" />

【问题讨论】：

标签： css

【解决方案1】：

将display:block 与宽度和高度属性一起使用。

【讨论】：

【解决方案2】：

这很不寻常

试试这样的。它应该工作

.square {
   width:100px;
   height:100px;
   display:block;
   overflow:hidden;
   float:left;
}

【讨论】：

【解决方案3】：

你需要结合这些风格规则来获得你需要的东西。 float 属性确保它们在水平行中堆叠，block 规则允许您设置元素的高度和宽度，overflow 隐藏规则阻止它随内容扩展。

.square {
    float: left;
    width:200px;
    height:200px;
    display:block;
    overflow:hidden;
}

【讨论】：

【解决方案4】：

感谢http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/ 指出它可以用纯 CSS 完成并且是流畅的，像这样：

.onesquare {

width: 30%;
margin: 0px 2% 0 0;
padding-bottom: 30%;
background-color: red;

}

【讨论】：