在页面容器中创建3列而不使用表格格式

Question

我正在制作一个响应式网站，在容器页面中有3列。

我希望html标签比table format更有用，可以制作3列或4列格式 比如 THIS 图片

 <div id = "main">
        row 1
        row 2 
        row 3
 </div><!--end main-->

Answer 1

如果您关心的只是最新的浏览器。然后您可以考虑使用CSS新功能 multi-column 布局。

此处有一个小型CSS代码，其中包含 DEMO 链接。

.three-col {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

Answer 2

只需您可以使用Columnizer

Columnizer jQuery插件将以报纸列格式自动布局您的内容。您可以指定列宽或静态列数。当然，它很容易使用！