CSS：在包装器中水平对齐N个div

Question

如何使用divs为'auto'的包装器水平对齐N个连续width？

像：

.boxes{ width:200px;height:200px;float:left; }

<div id="wrapper" style="width:auto;">
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    . . .
</div>

我尝试在包装上应用display:inline;和display:inline-block;，但框在达到浏览器/显示宽度后进入新的颜色？

但是将文档的宽度设置为固定将解决问题，但它不是我想要的。

此外，我可以使用tables轻松实现此目的，但我不想这样做，因为我的代码看起来很混乱，我很难维护。

Answer 1

添加

#wrapper
{
    white-space: nowrap;
}

并在您的方框上：将float:left更改为display:inline-block;

<强> FIDDLE

这样可以避免包装盒。