响应方格

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (21)

下面显示了具体的示例:

提问于
用户回答回答于

1.使响应方:

保持元素平方的诀窍(或其他成就率)是使用百分比。padding-bottom.

备注:也可以使用顶部填充或顶部/底部边距,但元素的背景不会显示。

的宽度来计算顶部填充。

此时,可以编写以下代码:

HTML

 <div></div>

CSS

div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

使用这种技术,可以做出任何其他的纵横比,这是一个表,根据宽高比和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.在方格中添加内容

由于不能直接在正方形中添加内容(这将扩展它们的高度,并且方块不再是正方形),因此需要在其中创建子元素(在本例中,我是usind div)。position:abolute;把内容放进去。这将从流中提取内容,并保持正方形的大小。

添加position:relative;在父div上,因此绝对子节点相对于其父节点的位置/大小。

让我们在3x3方格中添加一些内容:

HTML

<div class="square">
    <div class="content">
        .. CONTENT HERE ..
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

3.内容的中心

地平线:

这很简单,你只需要添加text-align:center.content.

垂直对准

display:table;
/* and */
display:table-cell;
vertical-align:middle;

我们不能用display:table;.square.content因为它与position:absolute;所以我们需要在里面创造两个孩子.content迪夫。我们的代码将被更新如下:

HTML

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS:

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}
用户回答回答于

可以使用VW(视图宽度)单位,这将使方块响应根据屏幕的宽度。

一个快速的模拟将是:

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

扫码关注云+社区