Html 响应方格

我想知道如何创建一个带有响应方块的布局。每个方块都有垂直和水平对齐的内容。具体示例如下所示

---

您只能使用CSS制作垂直和水平居中内容的响应方格。我将一步一步地介绍如何实现这一目标，但首先这里有两个演示：

现在让我们看看如何制作这些精美的响应方块

---

1.制作响应方块： 保持元素为正方形（或任何其他纵横比）的诀窍是使用百分比

填充底部


旁注：您也可以使用顶部填充或顶部/底部边距，但不会显示元素的背景

由于顶部填充是根据父元素的宽度计算的，因此元素的高度将根据其宽度变化。您现在可以根据其宽度保持其纵横比。

此时，您可以编写以下代码：

HTML:



CSS:

div{
宽度：30%；
填充底部：30%；/*=方形纵横比的宽度*/
}

下面是一个使用上述代码的3*3正方形网格

使用此技术，您可以制作任何其他纵横比，下面是一个表格，根据纵横比和30%宽度给出底部填充的值

 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%


2.在正方形内添加内容：
由于您不能直接在正方形内部添加内容（这将扩展其高度，并且正方形不再是正方形），因此您需要使用
position:absolute并将内容放入其中。这将从流中取出内容并保持正方形的大小

不要忘记添加
位置：相对，因此绝对子对象相对于其父对象进行定位/调整大小

让我们在3x3的正方形网格中添加一些内容：

HTML:


.. 内容在这里。。
... 以此类推，9次9格。。。

CSS:

.square{
浮动：左；
位置：相对位置；
宽度：30%；
填充底部：30%；/*=宽高比为1:1的宽度*/
利润率：1.66%；
溢出：隐藏；
}
.内容{
位置：绝对位置；
高度：80%；/*=100%-2*10%填充*/
宽度：90%；/*=100%-2*5%填充*/
填料：10%5%；
}

您可以使用vw（视图宽度）单位，这将使正方形根据屏幕宽度做出响应

这方面的快速模型是：


html，
身体{
保证金：0；
填充：0；
}
div{
高度：25vw；
宽度：25vw；
背景：番茄；
显示：内联块；
文本对齐：居中；
线高：25vw；
字体大小：20vw；
右边距：-4px；
位置：相对位置；
}
/*仅演示*/
部门：以前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
身高：继承；
宽度：继承；
背景：rgba（2002002002000.6）；
过渡：全部为0.4s；
}
div:悬停：之前{
背景：rgba（200200200200,0）；
}
1
2.
3.
4.
5.
6.
7.
8
公认的答案很好，但这可以通过
flexbox
实现

这是一个用编写的网格系统，允许每行显示1-10列

如果最后一行不完整（例如，您选择每行显示5个单元格，共有7个项目），则后续项目将水平居中。要控制尾随项的水平对齐，只需更改
.square grid
类下的

.square网格{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.方形网格单元{
背景色：rgba（0,0,0,0.03）；
长方体阴影：0 1px黑色；
溢出：隐藏；
位置：相对位置；
}
.方形网格内容{
左：0；
位置：绝对位置；
排名：0；
}
.方形网格单元：之后{
内容：''；
显示：块；
垫底：100%；
}
//大小–每行的单元格数
.方形网格单元--10{
弹性基准：10%；
}
.方形网格单元--9{
弹性基准：11.1111%；
}
.方形网格单元--8{
弹性基准：12.5%；
}
.方形网格单元--7{
弹性基准：14.2857143%；
}
.方形网格单元--6{
弹性基准：16.66667%；
}
.方形网格单元--5{
弹性基准：20%；
}
.方形网格单元--4{
弹性基准：25%；
}
.方形网格单元--3{
弹性基准：33.333%；
}
.方形网格单元--2{
弹性基准：50%；
}
.方形网格单元--1{
弹性基准：100%；
}


.square网格{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.方形网格单元{
背景色：rgba（0,0,0,0.03）；
长方体阴影：0 1px黑色；
溢出：隐藏；
位置：相对位置；
}
.方形网格内容{
左：0；
位置：绝对位置；
排名：0；
}
.方形网格单元：之后{
内容：''；
显示：块；
垫底：100%；
}
//大小–每行的单元格数
.方形网格单元--10{
弹性基准：10%；
}
.方形网格单元--9{
弹性基准：11.1111%；
}
.方形网格单元--8{
弹性基准：12.5%；
}
.方形网格单元--7{
弹性基准：14.2857143%；
}
.方形网格单元--6{
弹性基准：16.66667%；
}
.方形网格单元--5{
弹性基准：20%；
}
.方形网格单元--4{
弹性基准：25%；
}
.方形网格单元--3{
弹性基准：33.333%；
}
.方形网格单元--2{
弹性基准：50%；
}
.方形网格单元--1{
弹性基准：100%；
}

一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
我将此解决方案用于不同口粮的响应箱：

<div class="box ratio1_1">
  <div class="box-content">
            ... CONTENT HERE ...
  </div>
</div>

.box-content {
  width: 100%; height: 100%;
  top: 0;right: 0;bottom: 0;left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }