css - float 左侧图像，下方没有空间

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

您可以将图像包裹在列中，像这样 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 的答案