类似google webstore的CSS框布局

Question

我有一个网站，有一个类似谷歌网络商店的设计。它看起来是这样的：

​

​

如果你注意到底部区域的两个框没有填满上面的空间。

盒子是用ul包装的，项目是用li包装的。列表项是向左浮动的，并且ul有一个清晰的。

以下是jsfiddle http://jsfiddle.net/wTCKr/的链接

请建议CSS或任何JS，可以解决这个问题。谢谢。

Answer 1

如果您希望在右侧显示较大的方框，则需要将它们向右浮动，以便左侧的较小方框可以正确填充。

<li class="items big" style="float:right">

参见this updated JS Fiddle fork。

如果你把大盒子放在中间，这不会解决问题。如果您也需要支持这种情况，我建议是时候使用绝对定位和一些jQuery或JS为您做布局了。

更新:我喜欢快速挑战，所以我为你写了一些JS to do absolute positioning。我使用的是jQuery，但如果您在站点上不使用jQuery，则可以将其直接转换为JS。代码假设您具有有效顺序中的正确数量的框(例如，如果所有其他行都填充了小方框，则不能在最后一行放置大方框)。

Answer 2

您可以执行ul { top: -200px or margin-top: -200px;}，这将会起作用。