如何对齐屏幕截图中显示的图像？

Question

如何对齐屏幕截图中显示的图像，注意：图像来自后端..

我尝试了这段代码并使用顶部、右侧、左侧、底部属性定位图像 但是如果图像数量增加会导致 html 代码和 css 的返工.. 使用 nth-child 属性但它会在响应检查中产生问题.. 需要将图像从后端上传到正确的位置

     <ul class="box-image">
    <li>
      <div class="item">
        <img src="img/item1.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item2.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item3.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item4.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item5.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item6.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item7.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item8.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item9.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
  </ul>

Answer 1

您可以使用 css3 的 column 属性简单地实现这一点。您可以使用 css3 中的 column 属性来破坏图像以及文本。使用column-count，您可以指定要将图像分成的列数。

codepen

您可以参考我尝试使用 column-count: 3 的示例，该示例将图像分成 3 列。

HTML 编码

<div class='container'>
  <span class='image-wrapper'>
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" />
  </span>
  <span class='image-wrapper'>
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" />
  </span>
  <span class='image-wrapper'>
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" />
  </span>
  <span class='image-wrapper'>
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" />
  </span>
  <span class='image-wrapper'>
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" />
  </span>
</div>

CSS 样式

.container {
  column-count: 3;
}