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

Question

如何使用“自动”divs的包装器实现 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;，但框在达到浏览器/显示宽度后进入新的 y？

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

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

Answer 1

添加

#wrapper
{
    white-space: nowrap;
}

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

小提琴

这将防止你的盒子包装。