html - 借助 html 中的表格创建图片库
解决方案
这里有一些想法可以帮助您入门。
该片段首先使用 CSS 网格创建“画廊”,然后使用表格。
网格属性允许您根据行和列在任何位置开始/结束项目。
这些项目可以重叠,并确保中心的小方块高于其他所有项目,它的 z-index 为 1。
网格将是我的首选方法,但由于您必须使用表格,第二部分创建一个 5 个单元格 x 5 个单元格的表格,然后将背景图像放在位于相关单元格开头的各种伪元素上,但在某些箱子是宽度的两倍或三倍。
这不是表格的设计目的,但过去我们不得不使用它来解决格式问题。
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.gallery {
display: grid;
grid-auto-columns: 20vmin;
grid-auto-rows: 20vmin;
grid-gap: 0px;
}
.pic {
background-size: cover;
background-position: center;
}
.pic:nth-child(1) {
background-image: url(https://picsum.photos/id/1015/200/300); grid-column: 1 / 3; grid-row: 1 / 3; }
.pic:nth-child(2) {
background-image: url(https://picsum.photos/id/1016/200/300); grid-column: 3 / 6; grid-row: 1 / 4; }
.pic:nth-child(3) {
background-image: url(https://picsum.photos/id/1018/200/300); grid-column: 3 ; grid-row: 3; z-index: 1;}
.pic:nth-child(4) {
background-image: url(https://picsum.photos/id/1019/200/300); grid-column: 1 / 4; grid-row: 3 / 6; }
.pic:nth-child(5) {
background-image: url(https://picsum.photos/id/1021/200/300); grid-column: 4 / 6; grid-row: 4 / 6; }
</style>
<div class="gallery">
<div class="pic">1</div>
<div class="pic">2</div>
<div class="pic">3</div>
<div class="pic">4</div>
<div class="pic">5</div>
</div>
<style>
.tablegallery {
border-style: collapse;
}
.tablegallery,
.tablegallery *,
.tablegallery *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
border-style: collapse;
}
.tablegallery tr td {
--w: 20vmin;
width: var(--w);
height: var(--w);
display: inline-flex;
}
.tablegallery tr td {
position: relative;
}
.tablegallery tr td::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: inline-flex;
}
.tablegallery tr:nth-child(1) td:nth-child(1)::before {
background-image: url(https://picsum.photos/id/1015/300/300);
width: calc(2 * var(--w));
height: calc(2 * var(--w));
}
.tablegallery tr:nth-child(1) td:nth-child(3)::before {
background-image: url(https://picsum.photos/id/1016/200/300);
width: calc(3 * var(--w));
height: calc(3 * var(--w));
}
.tablegallery tr:nth-child(3) td:nth-child(3)::before {
background-image: url(https://picsum.photos/id/1018/500/300);
width: calc(1 * var(--w));
height: calc(1 * var(--w));
z-index: 1;
}
.tablegallery tr:nth-child(3) td:nth-child(1)::before {
background-image: url(https://picsum.photos/id/1019/200/300);
width: calc(3 * var(--w));
height: calc(3 * var(--w));
}
.tablegallery tr:nth-child(4) td:nth-child(4)::before {
background-image: url(https://picsum.photos/id/1021/200/300);
width: calc(2 * var(--w));
height: calc(2 * var(--w));
}
}
</style>
<table class="tablegallery">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
推荐阅读
- laravel - 如何在 laravel 分页链接中附加 csrf_field()?
- numpy - 尝试导入 tensorflow_hub 时出现此错误:无法从“tensorflow.python.distribute”导入名称“parameter_server_strategy_v2”
- python - 如果在 sqlite3 python 中不存在,则使用变量创建一个表
- css - 较大标签尺寸的上半部分在 react-native-simple-radio-button 中被切断
- c# - EF Core:如何以编程方式访问 DBSet 以用于种子目的
- javascript - 如何使用异步功能访问天气 API 降雨数据
- graphql - 在单个集合中保留多种类型(嵌套类型/嵌入类型):
- c# - 在 C# 中获取连接/断开的 USB HID 设备的“路径”
- group-by - 如何在 SQL Server 2014 的 FOR XML 子句中分组?
- php - 如何在 PHP 中将关联数组与索引数组结合起来