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

如果您的要求允许，我建议使用诸如Twitter's Bootstrap之类的UI框架。它们的组件可以完全达到您的目的（参见grid system documentation）。

Example

编辑：包含的网格文档链接＆amp;实施例