为什么浮动：没有填补空白

Question

我正在尝试创建一个可以有两个不同大小的网格框。 底行的最后两个图像应显示在最左侧，但它们出现在上一行的大图像之后。

如何从左侧开始最后两个项目以填充所有空间？

HTML

<div class="portfolio">
<ul id="grid">
   <li class="big"><a href="newgrid.html"><img src="http://asn.aerosoft.com/wp-content/uploads/2013/02/blue_sky_scenery_shelter_cove-32699_200x200.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li class="big"><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
</ul>
</div>

CSS

.portfolio {
  padding: 20px;
  margin: 20px auto 0;
  width: 840px;

  border: 1px solid blue;
  }

ul#grid {
  list-style: none;
  margin: 20px auto 0;
  width: 840px;  
  /*border: 1px solid red;*/
  }

#grid li {
  float: left;
  margin-right: 1px;
  width: 100px;
  height: 100px;
  } 


#grid li a:hover img {
  opacity:0.3;  filter:alpha(opacity=30);
  }

#grid li img {
  background-color: white;
  border: 1px solid #58595b;
  width: 100%;
  height: 100%;
  }

#grid li.big {
  width: 201px;
  height: 201px;
}

#grid li.big img {
    width: 201px;
    height: 200px;
}

#grid li a {
  display: block;
  }

Answer 1

在容器中优化排列框是NP-Complete问题，float:left不会为您解决。

如果您只是想贪图确保页面左侧已填满，那么您将不得不大量使用绝对定位和javascript来解决此问题。

这里的人（http://codeincomplete.com/posts/2011/5/7/bin_packing/）似乎已经编写了一些javascript代码，以便为了生成CSS精灵而打包图像。您可以修改他的代码，为图像添加一些填充，然后将其用于您自己的目的。

您也可以强制页面上的列数，并根据它们的高度（如pinterest和ebay以及其他此类网站）将内容打包在那里

Answer 2

建议 - 有四列。然后根据需要使用元素填充每列。这是一个 jsFiddle ，大​​致展示了这个概念。

<强> HTML：

...
<div class="column">
   <li class="big"><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li>
   <li><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li>
   <li><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li>
</div>
...

<强> CSS：

.column {
    border: 2px solid black;
    height: 600px;
    background: lime;
    width: 202px;
    display: inline-block;
}