html - 具有列数属性的元素顺序

Question

我正在尝试仅使用 CSS 为我的图像创建砖石式布局。我关注了this guide它运作良好。

HTML:

<div class="grid">  
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
    <img src="4.jpg">
    <img src="5.jpg">
    <img src="6.jpg">
    <img src="7.jpg">
    <img src="8.jpg">
</div>

CSS:

.grid {
  line-height: 0 ;

  -webkit-column-count: 4 ;
  -webkit-column-gap:   10px ;
  -moz-column-count:    4 ;
  -moz-column-gap:      10px ;
  column-count:         4 ;
  column-gap:           10px ;

  margin: 20px;
}

.grid img {
  width: 100% ;
  height: auto ;
  margin-bottom: 10px;
}

看起来像这样:

但是，图像按以下顺序出现:

1    3    5    7
2    4    6    8

我希望它是这样的:

1    2    3    4
5    6    7    8

我该如何解决这个问题？我更喜欢纯 CSS 解决方案，但我也对 Javascript 和 jQuery 方法持开放态度。理想情况下，我想要一个 row-count 属性，但它不存在。

Answer 1

在.grid 上使用display:flex 和flex-wrap: wrap。在图像上使用 width:25%; 和 flex: 1 0 25% 如果你想连续 4 个。

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: auto;
}
img {
  width: 25%;
  height: auto;
  flex: 0 1 25%;
}

<div class='grid'>
  <img src='https://placem.at/people?w=160&h=90&random=1&txt=1'>
  <img src='https://placem.at/things?w=160&h=90&random=1&txt=2'>
  <img src='https://placem.at/places?w=160&h=90&random=1&txt=3'>
  <img src='https://placem.at/things?w=160&h=90&random=1&txt=4'>
  <img src='https://placem.at/people?w=160&h=90&random=1&txt=5'>
  <img src='https://placem.at/places?w=160&h=90&random=1&txt=6'>
  <img src='https://placem.at/things?w=160&h=90&random=1&txt=7'>
  <img src='https://placem.at/people?w=160&h=90&random=1&txt=8'>
</div>