html - CSS:在包装器中水平对齐 N 个 div

Question

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

喜欢:

.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>

我尝试在 wrapper 上应用 display:inline; 和 display:inline-block; 但 boxes 在到达后进入新的 y浏览器/显示宽度？

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

我也可以使用 tables 轻松实现这一点，但我不想这样做，因为我的代码看起来很乱，而且很难维护。

Answer 1

添加

#wrapper
{
    white-space: nowrap;
}

并在您的盒子类上:将 float:left 更改为 display:inline-block;

FIDDLE

这将使您的箱子不会缠绕。