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

Posted 2023-03-05

【中文标题】如何对齐屏幕截图中显示的图像？

【英文标题】：How to align images as shown in the screenshot?

【发布时间】：2018-01-02 17:08:37

【问题描述】：

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

我尝试了这段代码并使用顶部、右侧、左侧、底部属性定位图像 但是如果图像数量增加会导致 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>

【问题讨论】：

您需要与我们分享您的代码。展示你做了什么。

我想像这样对齐图像（请参考屏幕截图）..

最近我使用了monosry插件...但是当图像数量增加时会出现问题它不起作用...因为图像是通过后端更新的...如何将图像计数到像这样对齐....

【参考方案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;

【讨论】：

很好，但我需要第二列对齐，如图所示

列数是否总是3？

否则可以使用flexbox。但是您需要在显示之前将图像从后端拆分并放入每一列。

ya.. 如果图像数量增加，它们将与下一行对齐