中心对齐的浮动块

Question

我试图找出如何使用包含中心对齐的浮动块的流体模板。 我认为以下图片显示了它应该如何运作。

模板是流动的，可以调整大小。浮动框将覆盖屏幕的宽度，其余的将在中心对齐。

如果用户调整窗口大小，剩余的浮动框将仍然居中对齐。

我不确定如何使用CSS（仅限可能）或使用jQuery实现此目的？

Answer 1

http://jsfiddle.net/VpLGf/适用于Chrome 13

它应该适用于除IE5.5，IE6和IE7之外的所有“现代”浏览器

您基本上想要的是一组使用inline显示inline或看起来float的元素。您还希望元素的行为类似block，因为您希望它们占用分配给它们的空间，而不仅仅是适合（没有内容，内联而不是块元素只是不可见）

给出html：

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

和css

.block{
  width: 100px;
  height: 100px;
  background-color: black;
  margin: 20px;
}

因此，解决方案可以是div.block float: left或给display: inline-block;

现在元素仍然需要在页面中间对齐。使用float:left解决方案，这是不可能的，因为无论什么（它们都逃避“正常”文档流），所有元素都会左对齐，而display: inline-block可以将父项放在text-align: center上这一切都像你想要的那样排队

Answer 2

这只是一个猜测 - 但我相信，如果每个方框都是<span>，最后一行只能设置在<span style="margin: 0 auto"></span>的另一个范围内，这可能会达到你想要的效果。

因此，底线上的方框将是<span>，在另一个范围内设置样式。

我只是把它扔到那里，希望别人可以编辑答案更准确/更正。