在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>