在html表格的幫助下創建圖片庫

我在下面有一張圖片，我想在 HTML 表格的幫助下設計這樣的布局

uj5u.com熱心網友回復：

這里有一些想法可以幫助您入門。

此代碼段首先使用 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>

標籤：html css 图片 html-table 排

上一篇：如何讓文字在圖片下方流動？

下一篇：如何在flutter中找到資產（上傳的影像）的絕對路徑？