浮动左侧图像，

Question

如何将图像向左浮动，下方没有空格？

我使用过float: left。

HTML

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
}
#container {
  width: 100vw;
  overflow: hidden;
}
#container img {
  min-width: 33.33333333333%;
  max-width: 33.33333333333%;
  float: left;
}

<div id="container">
  <img src="http://lorempixel.com/100/100/">
  <img src="http://lorempixel.com/150/150/">
  <img src="http://lorempixel.com/120/120/">
  <img src="http://lorempixel.com/100/100/">
  <img src="http://lorempixel.com/110/110/">
  <img src="http://lorempixel.com/100/100/">
  <img src="http://lorempixel.com/100/100/">
  <img src="http://lorempixel.com/100/100/">
  <img src="http://lorempixel.com/100/100/">
  <img src="http://lorempixel.com/100/100/">
</div>

Answer 1

最大的问题是每张图片的高度。如果你只是正确的高度，它将被正确看到 在其他情况下，您可以使用http://isotope.metafizzy.co/插件 插入排序所有图像，以便每个图像之间没有空格，并修复尺寸。

Answer 2

您可以将图片包装在列中，例如fiddle

<div class = "container">
 <div class="column">
  <img src = "http://placehold.it/200x300">
  <img src = "http://placehold.it/200x200">
 </div>  
 <div class="column">
  <img src = "http://placehold.it/200x400">
  <img src = "http://placehold.it/200x200">
 </div>
 <div class="column">
  <img src = "http://placehold.it/200x500">
  <img src = "http://placehold.it/200x200">
 </div>    
</div> 

CSS

.container{
 width: 100vw;
 position: relative; 
}
.column {
  float:left;
  width:33.333333%;
}    
.column img{
  width:100%;
  border: 1px solid;
}

如果您需要申请容器内没有div，我会推荐Roy的回答