javascript - CSS 框布局，如 google webstore

Question

我有一个网站，其设计类似于谷歌网上商店。这是它的样子：

如果您在底部区域注意到 2 个框并没有填满上面的空间。

盒子被包裹起来ul，物品在li. 列表项是向左浮动的，并且ul是明确的。

这是 jsfiddle http://jsfiddle.net/wTCKr/的链接

请建议 CSS 或任何可以解决此问题的 JS。谢谢你。

Answer 1

如果你想要右边的大盒子，你需要让它们向右浮动，这样左边的小盒子才能正确填充。

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

请参阅此更新的 JS Fiddle fork。

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

更新：我喜欢快速挑战，所以我写了一些JS 来为你做绝对定位。我使用了 jQuery，但如果您的网站上不使用 jQuery，您可以将其转换为直接的 JS。该代码假定您在有效顺序中拥有正确数量的框（例如，如果所有其他行都用小框填充，则不能在最后一行放置大框）。

Answer 2

你可以做ul { top: -200px or margin-top: -200px;}，这会奏效。