Question

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

我尝试了这段代码，并使用top，right，left，bottom属性定位图像但如果图像数量增加导致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;
}

如何对齐图像，如截图所示？

1 个答案: