在 html 中的 table 的帮助下创建图片库

Question

我有下面的图片，我想在 HTML

中的 table 的帮助下设计这样的布局

Answer 1

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

此代码段首先使用 CSS 网格创建 'gallery'，然后使用 table。

网格属性可让您 start/end 根据行和列的任意位置放置项目。

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

网格是我的首选方法，但由于您必须使用 table，第二部分创建一个 5 乘 5 单元格 table，然后将背景图像放在各种伪元素上位于相关单元格的开头，但在某些情况下是宽度的两倍或三倍。

这不是 table 的设计目的，但过去我们不得不使用它来解决格式问题。

<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 中的 table 的帮助下创建图片库

Creating picture gallery with the help of table in html

html

css

row

html-table

image