html - 如何使图像填充图像网格中的 2 列
问题描述
我是编写 html 和 css 代码的新手。我尝试使用 CSS FlexBox 制作一个包含三列的图片库
html:
<div class="row">
<div class="column">
<img src="sea.jpg">
<img src="guns.jpg">
</div>
<div class="column">
<img src="cars.jpg">
<img src="gg.png">
</div>
<div class="column">
<img src="games.jpg">
<img src="games.jpg">
</div>
</div>
CSS:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 33.33%;
padding:10,10px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
上面代码的结果是一个正常的三列图像网格,每列都填充了图片。有没有办法让第一行第一列中的第一张图像跨越到第一行第二列?
解决方案
对于刚接触 HTML/CSS 的人来说非常好!但您可能从未听说过 CSS 网格。
Flexbox 非常适合单列或单行组织,但缺乏多列/多行组织。这就是 CSS 网格的用武之地。
要使对象成为网格,请执行
#container {
display: grid;
}
然后,我们需要指定列数和行数。我们可以使用grid-template-rows
和grid-template-columns properties for this. For every extra value you add, you add another row/column. For example,
grid-template-columns: 20px 20px;' 将生成两列,每列 20px 宽。如果您指定容器的宽度和高度,则可以将值设置为 auto (例如grid-template-columns: auto auto;
,这将创建两个大小相等且尽可能宽的列,同时仍保持在网格的边界内。这同样适用于grid-template-rows
.所以让我们假设,现在,你想要一个 100 像素 x 100 像素的 3x3 网格。
#container {
display: grid;
width: 100px;
height: 100px;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
}
伟大的!现在我们需要指定我们希望网格项目去哪里。我们为此使用grid-row
andgrid-column
属性。让我们来看看它的样子。
#image-one {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
那么这些数字是什么意思呢?
好吧,当我们创建 3x3 网格时,实际上创建了 4 条垂直线和 4 条水平线。如果您感到困惑,请绘制一个带边框的 3x3 网格,您会看到 4 条水平线和 4 条垂直线。
所以,代码是说第一个图像应该在水平网格线 1 和 2 之间以及垂直网格线 1 和 2 之间。回到你的绘图,这是第一个框!
现在您可以对每张图片执行此操作。这是第二张图片:
#image-two {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
这会将图像放在第一行第二列。记住,如果你卡住了,就画一幅画!这很难,因为我们用文字描述视觉指令,所以使用绘图来帮助翻译非常有帮助。
此外,图像不必在网格上占据 1 x 1 的空间。例如,您可以制作一个从第一个框开始的 2x2 图像,方法是...
#test-image {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
...将图像放在水平网格线 1 和 3 以及垂直网格线 1 和 3 之间,也就是制作一个 2x2 的盒子!再次,如果您感到困惑,请绘制图表。
此外,为了进一步阅读和有用的图表,请查看https://css-tricks.com/snippets/css/complete-guide-grid/。他们的解释工作比我做得更好。此外,如果您好奇的话,他们有关于 flex-box 的优秀教程/评论/文档:https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。
祝你好运,编码愉快!:)
推荐阅读
- angular - CORS 策略:请求的资源上不存在“Access-Control-Allow-Origin”标头。如何解决?
- kotlin - 计算a的数量
- reporting-services - 大数据上的 SSRS 分页符
- c# - 是否可以以编程方式从全局资源文件中读取“评论”?
- search - 如何在网格上生成可用步骤列表?
- opengl - 使用着色器的程序旋转立方体不起作用
- api - 如何从改造 api 获取调用返回对象
- android-studio - 设备选项在 android studio 中不可见
- c# - Async method lacks await operators warning when the await is in a function passed to an async lambda expresion
- video - 保护浏览器中视频的各种方法是什么?