主页 / 问题 / 1581749
Accepted
Андрей Баев
Asked:2024-05-27 07:19:41 +0000 UTC2024-05-27 07:19:41 +0000 UTC

如何布局两个垂直偏移的列

  • 772

您需要布置一个部分，其中块的排列方式如下。 两列垂直偏移

css

1 个回答

  1. Best Answer

    column-count

    body {
  font-family: Arial, sans-serif;
}

.masonry {
  column-count: 2;
  column-gap: 10px;
}

.masonry-item {
  background-color: #b0c4de;
  margin-bottom: 10px;
  break-inside: avoid;
}

.masonry-item img {
  width: 100%;
  display: block;
}
    <div class="masonry">
  <div class="masonry-item"><img src="https://via.placeholder.com/200x150" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x300" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x100" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x200" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x250" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x350" alt=""></div>
</div>

    • 0

相关问题