中心对齐的浮动块

我想弄清楚如何有一个可以包含中心对齐的浮动块的流体模板。我想下面的图片显示了它应该如何工作。中心对齐的浮动块

该模板是流动的，可以调整大小。浮动盒子将覆盖屏幕的宽度，其余的盒子将居中对齐。

enter image description here

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

enter image description here

我不知道如何实现这一目标使用CSS（也许只有），或使用jQuery？

来源

2011-09-17 SwissChocolate

http://jsfiddle.net/VpLGf/，在铬对我的作品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解决方案，这是不可能的，因为所有元素无论如何都对齐（它们逃离“正常”文档流程），但是，您可以将父项放在text-align: center上，并且它可以像所需的那样排成一行

来源

2011-09-17 16:00:44

在Firefox 3.6/Opera 11.51/IE 8中也是如此。 –

+1为一个很好的解决方案。不过，如果你能向OP解释你是如何做到的，那将会更有帮助;-) –

这只是一个猜测 - 但我相信，如果每个盒子是<span>而最后一行只设置在另一个范围<span style="margin: 0 auto"></span>这可能实现你想要的。

因此，底线上的方框将在<span>范围内与样式集的其他范围内。

我只是把它扔在那里，希望其他人可以编辑答案更加精确/正确。

来源

2011-09-17 15:59:19

中心对齐的浮动块

回答

相关问题