在html表格的帮助下创建图片库

Question

我在下面有一张图片，我想在 HTML 表格的帮助下设计这样的布局

Answer 1

这里有一些想法可以帮助您入门。

此代码段首先使用 CSS 网格创建“画廊”，然后使用表格。

grid 属性让你可以在任何你想要的行和列的位置开始/结束一个项目。

这些项目可以重叠，并确保中心的小方块高于其他所有项目，它的 z-index 为 1。

网格将是我的首选方法，但由于您必须使用表格，第二部分创建一个 5 个单元格的 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>