响应方块网格
[英] Grid of responsive squares
本文介绍了响应方块网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何使用响应式方块创建布局.每个方块都有垂直和水平对齐的内容.具体例子如下图...
解决方案
您可以仅使用 CSS 制作具有垂直和水平居中内容的响应式正方形网格.我将逐步解释如何实现，但首先这里有 2 个演示，说明您可以实现的目标:
现在让我们看看如何制作这些漂亮的响应式方块！
1.制作响应式方块:
保持元素方形(或任何其他纵横比)的技巧是使用百分比padding-bottom.
旁注:您也可以使用顶部填充或顶部/底部边距，但不会显示元素的背景.
As top padding 根据父元素的宽度计算(参考MDN)，元素的高度会根据其宽度而变化.您现在可以根据其宽度保持纵横比.
此时你可以编码:
HTML :
<div></div>
CSS :
div {宽度:30%；填充底部:30%；/* = 正方形纵横比的宽度 */}
这是一个简单布局示例 3*3使用上面的代码创建正方形网格.
使用此技术，您可以制作任何其他纵横比，这是根据纵横比和 30% 宽度给出底部填充值的表格.
纵横比 |填充底部 |30% 宽度------------------------------------------------1:1 |= 宽度 |30%1:2 |宽度 x 2 |60%2:1 |宽度 x 0.5 |15%4:3 |宽度 x 0.75 |22.5%16:9 |宽度 x 0.5625 |16.875%
2.在方块内添加内容:
由于您不能直接在正方形内添加内容(它会扩展它们的高度，而正方形不再是正方形)，您需要使用 在它们内部创建子元素(在本例中，我使用的是 div)position: absolute; 并将内容放入其中.这会将内容从流中取出并保持正方形的大小.
不要忘记在父 div 上添加 position:relative; 以便绝对子级相对于其父级定位/大小.
让我们向 3x3 方格添加一些内容:
HTML :
<div class="content">.. 内容在这里..
... 以此类推 9 次为 9 个方格 ...
CSS :
.square {向左飘浮;位置:相对；宽度:30%；填充底部:30%；/* = 1:1 纵横比的宽度 */保证金:1.66%；溢出:隐藏；}.内容 {位置:绝对；高度:80%；/* = 100% - 2*10% 填充 */宽度:90%；/* = 100% - 2*5% 填充 */填充:10% 5%；}
RESULT <-- 需要一些格式很漂亮！
3.以内容为中心:
水平:
这很简单，你只需要将text-align:center 添加到.content.
结果
垂直对齐:
这变得很严重！诀窍是使用
display: table;/* 和 */显示:表格单元格；垂直对齐:中间；
但是我们不能在 .square 或 .content div 上使用 display:table; 因为它与 position:absolute; 冲突，所以我们需要在 .content div 中创建两个孩子.我们的代码将更新如下:
HTML :
<div class="content"><div class="table"><div class="table-cell">... 内容在这里 ...
... 以此类推 9 次为 9 个方格 ...
CSS :
.square {向左飘浮;位置:相对；宽度:30%；填充底部:30%；/* = 1:1 纵横比的宽度 */保证金:1.66%；溢出:隐藏；}.内容 {位置:绝对；高度:80%；/* = 100% - 2*10% 填充 */宽度:90%；/* = 100% - 2*5% 填充 */填充:10% 5%；}.桌子{显示:表；高度:100%；宽度:100%；}.table-cell{显示:表格单元格；垂直对齐:中间；高度:100%；宽度:100%；}
我们现在已经完成了，我们可以在这里看看结果:
此处可编辑小提琴
I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally aligned content. The specific example is displayed below...
解决方案
You can make responsive grid of squares with vertically and horizontally centered content only with CSS. I will explain how in a step by step process but first here are 2 demos of what you can achieve:
Now let's see how to make these fancy responsive squares!
1. Making the responsive squares :
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.
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 ratio according to its width.
At this point you can code:
HTML :
<div></div>
CSS :
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Here is a simple layout example of 3*3 squares grid using the code above.
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.
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 :
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.
Don't forget to add position:relative; on the parent divs so the absolute children are positioned/sized relatively to their parent.
Let's add some content to our 3x3 grid of squares :
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 :
Horizontally :
This is pretty easy, you just need to add text-align:center to .content.
RESULT
Vertical alignment :
This becomes serious! The trick is to use
display: table;
/* and */
display: table-cell;
vertical-align: middle;
but we can't use display:table; on .square or .content divs because it conflicts with position:absolute; so we need to create two children inside .content divs. Our code will be updated as follow :
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 :
editable fiddle here
这篇关于响应方块网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
