Question

我正在尝试创建一个相册应用。目前，我拥有它，直到最多四个图像，每个图像都占div的100 / n％。当图像数大于5时，我想使网格显示为：

我该如何实现？我一直在阅读CSS-grid，但它们似乎仅显示了将图像对齐成一行的示例。

这是我的代码：

    #photos {
      width: 634px;
      height: 339px;
    }

    .photos-gallery {
      width: 634px;
      height: 275.03px;
    }
    .photos-gallery-header {
      font-size: 24px;
      font-weight: bold;
      line-height: 32px;
      color: #333333;
      border-bottom: 1px solid #E1E1E1;
      padding-bottom: 16px;
      margin: 0 0 16px 0;
      display: flex;
      justify-content: space-between;
    }

    .photos-gallery-content {
      height: 200px;

    }

    .photos-gallery-layout {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
    }
    
    .photos-gallery-li {
      flex: 1;
    }
    
    .photo,
    .photo img {
      height: 100%;
    }
    
    .photo img {
      width: 100%;
      object-fit: cover;
    }

<body>
  <div id= "photos-gallery" class="photos content-block">
    <h2 class="photos-gallery-header"> 2 Photos </h2>
    <div class="photos-gallery-content">
      <ul class="photos-gallery-layout">
        <li class="photos-gallery-li">
          <div class="photo">
            <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
          </div>
        </li>
        <li class="photos-gallery-li">
          <div class="photo">
            <img src="https://i.imgur.com/OPAR3PCb.jpg"/>
          </div>
        </li>
        <li class="photos-gallery-li">
          <div class="photo">
            <img src="https://i.imgur.com/A8eQsll.jpg"/>
          </div>
        </li>
        <li class="photos-gallery-li">
          <div class="photo">
            <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
          </div>
        </li>
        <li class="photos-gallery-li">
          <div class="photo">
            <img src="https://i.imgur.com/OPAR3PCb.jpg"/>
          </div>
        </li>
        <li class="photos-gallery-li">
          <div class="photo">
            <img src="https://i.imgur.com/A8eQsll.jpg"/>
          </div>
        </li>
        <li class="photos-gallery-li">
          <div class="photo">
            <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
          </div>
        </li>
      </ul>
    </div>
  <div>
</body>

Answer 1

使用display: grid实现这一目标。使用grid可以控制列和行的放置。将此用作参考https://css-tricks.com/snippets/css/complete-guide-grid/

CSS

#photos-gallery {
  height: 275px;
  width: 634px;
}

.photos-gallery-header {
  border-bottom: 1px solid #e1e1e1;
  color: #333;
  display: flex;
  font-size: 24px;
  font-weight: bold;
  justify-content: space-between;
  line-height: 32px;
  margin: 0 0 16px;
  padding-bottom: 16px;
}

.photos-gallery-content {
  display: grid;
  grid-template-columns: 20% 40% 20% 20%;
  grid-column-gap: 0;
  grid-row-gap: 0;
  height: 200px;
}   

.photos-gallery-content .item {
  box-shadow: inset 0 0 0 1px #000;
  overflow: hidden;
}

.photos-gallery-content .item-1 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1
}

.photos-gallery-content .item-2 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
}

.photos-gallery-content .item-3 {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

HTML

<div id="photos-gallery" class="photos content-block">
  <h2 class="photos-gallery-header">2 Photos</h2>
  <div class="photos-gallery-content">
    <div class="item item-1">
      <div class="photo">
        <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
      </div>
    </div>
    <div class="item item-2">
      <div class="photo">
        <img src="https://i.imgur.com/OPAR3PCb.jpg"/>
      </div>
    </div>
    <div class="item item-3">
      <div class="photo">
        <img src="https://i.imgur.com/A8eQsll.jpg"/>
      </div>
    </div>
    <div class="item item-4">
      <div class="photo">
        <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
      </div>
    </div>
    <div class="item item-5">
      <div class="photo">
        <img src="https://i.imgur.com/OPAR3PCb.jpg"/>
      </div>
    </div>
    <div class="item item-6">
      <div class="photo">
        <img src="https://i.imgur.com/A8eQsll.jpg"/>
      </div>
    </div>
    <div class="item item-7">
      <div class="photo">
        <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
      </div>
    </div>
  </div>
<div>

DEMO

如何在div中显示像网格一样的图像

1 个答案: