0

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

在此处输入图像描述

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

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;
  }
4

2 回答 2

1

在容器中以最佳方式排列盒子是一个 NP-Complete 问题，float:left不会为您解决它。

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

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

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

于 2013-07-14T04:32:17.120 回答
0

建议 - 有四列。然后根据需要用元素填充每一列。这是一个大致演示该概念的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;
}
于 2013-07-14T04:26:49.480 回答