文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >响应式方格网格

问响应式方格网格
EN

Stack Overflow用户
提问于 2013-12-09 01:44:42
回答 4查看 200.4K关注 0票数 181

我想知道如何使用responsive 创建布局。每个正方形将具有垂直和水平对齐的内容。具体的例子如下所示。

​

​

html
css
responsive-design
grid-layout
aspect-ratio
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-12-09 02:17:07

您可以使响应式网格的正方形与垂直和水平居中的内容只有CSS。我将一步一步地解释如何实现，但首先是您可以实现的两个演示：

​

​

现在让我们看看如何制作这些奇特的响应式方块！

​

1.制作响应式方块：

保持元素正方形(或任何其他纵横比)的诀窍是使用百分比padding-bottom。

附注:您也可以使用顶部填充或上/下边距，但元素的背景不会显示。

由于顶部填充是根据parent element (See MDN for reference)的宽度计算的，因此元素的高度将根据其宽度而变化。你现在可以根据它的宽度保持它的宽高比。

此时，您可以编写代码：

HTML：

代码语言：javascript
复制
<div></div>

CSS：

代码语言：javascript
复制
div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

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

使用这种技术，你可以制作任何其他的宽高比，这是一个表格，给出了底部填充的值根据宽高比和30%的宽度。

代码语言：javascript
复制
 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;在正方形中创建子元素(在本例中我使用div)，并将内容放入其中。这将去掉流中的内容，并保持正方形的大小。

不要忘记在父div上添加了position:relative;，以便绝对子对象相对于其父对象定位/调整大小。

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

HTML：

代码语言：javascript
复制
<div class="square">
    <div class="content">
        .. CONTENT HERE ..
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS：

代码语言：javascript
复制
.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.内容居中：

Horizontally :

这非常简单，您只需要向.content添加text-align:center即可。

垂直对齐:

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

代码语言：javascript
复制
display: table;
/* and */
display: table-cell;
vertical-align: middle;

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

HTML：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
.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%;
}

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

LIVE FULLSCREEN RESULT

editable fiddle here

票数 430
EN

Stack Overflow用户

发布于 2015-04-16 17:22:24

您可以使用vw (视图宽度)单位，这将使正方形根据屏幕的宽度进行响应。

这方面的一个快速模型是：

​

代码语言：javascript
复制
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);
}
代码语言：javascript
复制
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

​

票数 16
EN

Stack Overflow用户

发布于 2016-01-23 00:07:24

公认的答案是很好的，但是这可以用flexbox来完成。

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

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

代码语言：javascript
复制
.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%;
}

​

代码语言：javascript
复制
.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%;
}
代码语言：javascript
复制
<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>

​

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

这是在FF和Chrome中测试的。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/20456694

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档