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

Posted 2023-03-06

【中文标题】CSS - 具有完美正方形的网格[重复]

【英文标题】：CSS - Grid with perfect squares [duplicate]

【发布时间】：2011-03-25 15:39:57

【问题描述】：

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

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

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

【问题讨论】：

display:block 不起作用 btw...jsfiddle.net/AYCkr

【参考方案1】：

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

【讨论】：

不幸的是，block 打破了水平行...

【参考方案2】：

这很不寻常

试试这样的。它应该工作

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

见：http://jsfiddle.net/EyXpC/

【讨论】：

不幸的是，block 打破了水平行... -

哈哈哈@ina，当然你必须让它浮动。查看更新

【参考方案3】：

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

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

【讨论】：

向左浮动 哇！ jsfiddle.net/AYCkr/1

【参考方案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;