css - div 的中心列

Question

我有一个包含一堆相同大小的 div 的页面，我想以响应方式适应包装器 div 的可用空间。

这个想法是: - 在大屏幕上，div 将显示在 3 列中 - 在中等大小的屏幕上，div 将显示在 2 列中 - 在手机屏幕上，div 将显示在 1 列中。

我还希望包装器水平居中。

我在尝试:

 #wrapper {margin:0 auto;}
 .column {float:left; max-width:340px; height:540px; margin:20px}

除了包装器没有居中外，它按预期工作，这是我试图通过 css 的第 1 行实现的。

知道如何实现吗？

编辑:

HTML代码:

<div id="wrapper">
    <div class="column one">
    </div>
    <div class="column two">
    </div>
    <div class="column three">
    </div>
</div>

Answer 1

如果您的要求允许您这样做，我建议您使用 UI 框架，例如 Twitter's Bootstrap .他们的组件可以完全实现您正在尝试做的事情(请参阅他们的 grid system documentation )。

Example

编辑:包含网格文档链接和示例