Html 响应方块网格

Question

提问by garethdn

I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally alignedcontent. The specific example is displayed below...

我想知道如何使用响应式方块创建布局。每个方块都有垂直和水平对齐的内容。具体例子如下图...

responsive squares with content

带有内容的响应式方块

Answer 1

回答by web-tiki

You can make responsive grid of squareswith verticaly and horizontaly centered contentonly with CSS. I will explain how in a step by step process but first here are 2 demos of what you can achieve :

您可以仅使用CSS制作具有垂直和水平居中内容的响应式正方形网格。我将逐步解释如何进行，但首先这里有 2 个您可以实现的演示：

Now let's see how to make these fancy responsive squares!

现在让我们看看如何制作这些花哨的响应方块！

1. Making the responsive squares :

1. 制作响应式方块：

The trick for keeping elements square (or whatever other aspect ratio) is to use percent padding-bottom.
Side note: you can use top padding too or top/bottom margin but the background of the element won't display.

保持元素方形（或任何其他纵横比）的技巧是使用百分比padding-bottom。
旁注：您也可以使用顶部填充或顶部/底部边距，但不会显示元素的背景。

As top padding is calculated according to the width of the parent element(See MDN for reference), the height of the element will change according to its width. You can now Keep its aspect ratioaccording to its width.
At this point you can code :

由于顶部填充是根据父元素的宽度计算的（参考 MDN），元素的高度会根据其宽度而变化。您现在可以根据其宽度保持其纵横比。
此时你可以编码：

HTML:

 <div></div>

CSS

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

Here is a simple layout exampleof 3*3 squares grid using the code above.

这是一个使用上面代码的 3*3 正方形网格的简单布局示例。

With this technique, you can make any other aspect ratio, here is a table giving the values of bottom padding according to the aspect ratio and a 30% width.

使用此技术，您可以制作任何其他纵横比，这是根据纵横比和 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. Adding content inside the squares

2.在方块内添加内容

As you can't add content directly inside the squares (it would expand their height and squares wouldn't be squares anymore) you need to create child elements (for this example I am using divs) inside them with position: absolute;and put the content inside them. This will take the content out of the flow and keep the size of the square.

由于您不能直接在正方形内添加内容（它会扩展它们的高度，而正方形不再是正方形），您需要在它们内部创建子元素（在本例中，我使用的是 div）position: absolute;并将内容放入其中. 这会将内容从流中取出并保持正方形的大小。

Don't forgetto add position:relative;on the parent divs so the absolute children are positioned/sized relatively to their parent.

不要忘记添加position:relative;父 div，以便绝对子级相对于其父级定位/大小。

Let's add some content to our 3x3 grid of squares :

让我们向我们的 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%;
}

RESULT<-- with some formatting to make it pretty!

结果<-- 用一些格式使它漂亮！

3.Centering the content

3.以内容为中心

Horizontally :

水平：

This is pretty easy, you just need to add text-align:centerto .content.
RESULT

这很简单，你只需要添加text-align:center到.content.
结果

Vertical alignment

垂直对齐

This becomes serious! The trick is to use

这变得很严重！诀窍是使用

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

butwe can't use display:table;on .squareor .contentdivs because it conflicts with position:absolute;so we need to create two children inside .contentdivs. Our code will be updated as follow :

但是我们不能使用display:table;on.square或.contentdivs 因为它与它冲突position:absolute;所以我们需要在.contentdivs 中创建两个孩子。我们的代码将更新如下：

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%;
}

We have now finished and we can take a look at the result here :

我们现在已经完成了，我们可以在这里查看结果：

LIVE FULLSCREEN RESULT

实时全屏结果

editable fiddle here

可编辑的小提琴在这里

Answer 2

回答by jbutler483

You could use vw (view-width) units, which would make the squares responsive according to the width of the screen.

您可以使用 vw (view-width) 单位，这将使方块根据屏幕的宽度做出响应。

A quick mock-up of this would be:

一个快速的模型是：

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>

Answer 3

回答by Patrick Berkeley

The accepted answer is great, however this can be done with flexbox.

接受的答案很好，但是可以使用flexbox.

Here's a grid system written with BEM syntaxthat allows for 1-10 columns to be displayed per row.

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

If there the last row is incomplete (for example you choose to show 5 cells per row and there are 7 items), the trailing items will be centered horizontally. To control the horizontal alignment of the trailing items, simply change the justify-contentpropertyunder the .square-gridclass.

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

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

<div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

小提琴：https: //jsfiddle.net/patrickberkeley/noLm1r45/3/

This is tested in FF and Chrome.

这在 FF 和 Chrome 中进行了测试。

Answer 4

回答by mitjajez

I use this solution for responsive boxes of different rations:

我将此解决方案用于不同口粮的响应盒：

HTML:

HTML：

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

CSS:

CSS：

.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%; }

See demo on JSfiddle.net

在JSfiddle.net上查看演示

Html 响应方块网格

提问by garethdn

回答by web-tiki

1. Making the responsive squares :

1. 制作响应式方块：

2. Adding content inside the squares

2.在方块内添加内容

3.Centering the content

3.以内容为中心

LIVE FULLSCREEN RESULT

实时全屏结果

回答by jbutler483

回答by Patrick Berkeley

回答by mitjajez

相关推荐

最近更新

标签

Html 响应方块网格

提问by garethdn

回答by web-tiki

1. Making the responsive squares :

1. 制作响应式方块：

2. Adding content inside the squares

2.在方块内添加内容

3.Centering the content

3.以内容为中心

LIVE FULLSCREEN RESULT

实时全屏结果

回答by jbutler483

回答by Patrick Berkeley

回答by mitjajez

相关推荐

Html 如何从 Bootstrap 3 中获取响应式网格？

Html 如何强制 Web 浏览器不缓存图像

Html 如何确保两个单词保持在同一行？

Html css单行或多行垂直对齐

相关推荐

最近更新

标签