html - 为什么 float :left not filling in the gaps

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 完全问题，float:left 不会为您解决这个问题。

如果你只想贪婪地确保页面左侧被填满，那么你将不得不大量使用绝对定位和javascript来解决这个问题。

这家伙 ( http://codeincomplete.com/posts/2011/5/7/bin_packing/ ) 似乎写了一些 javascript 代码来打包图像以生成 CSS Sprite 。您或许可以修改他的代码，为图像添加一些填充，然后将其用于您自己的目的。

您也可以强制设置页面上的列数，并根据它们的高度相应地在其中打包内容，例如 pinterest 和 ebay 以及其他此类网站