Question

使用this tutorial，我尝试做同样的事情，但图像之间有间隙。所以我只是将列间隙属性更改为3px，但很明显，这只能水平工作。有没有像行间隙或任何东西所以我也可以在图像之间垂直间隔3px？这是codepen。

column-gap: 3px;
row-gap: 3px /* ??? */

编辑：此图像网格的工作原理是简单地使用：

line-height: 0;

和

column-count: <any value>
column-gap: 0;

在容器/父级上，用

width: 100% !important;
height: auto !important;

关于图像/儿童。

HTML

<section id="photos">
<img src="http://www.lorempixel.com/394/205/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/246/306/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/356/398/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/388/367/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/316/354/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/348/216/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/342/371/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/327/201/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/310/225/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/210/238/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/255/247/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/334/361/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/399/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/288/215/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/216/227/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/311/200/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/371/266/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/362/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/333/220/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/297/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/377/342/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/306/243/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/303/223/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/384/238/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/396/272/cats" alt="pretty kitty">
</section>

CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   3px;
   -moz-column-count:    5;
   -moz-column-gap:      3px;
   column-count:         5;
   column-gap:           3px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

编辑2：我已经尝试了行高，但它似乎只使用了一半的空间和行高，以及边距底部和填充底部将在每列的最底部留下额外的空间，并且除此之外，你不能真正改变它们的颜色，边框底部虽然更适合颜色，但它也会在每一列的末尾留下空间。

Answer 1

没有行。为图像添加边距。

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 3px;
}

CSS行间隙像柱间隙？

1 个答案: