如何使用css作为网格来安排div？

Question

我想在浏览器中向用户提供动态生成的(PHP，XML)问卷，如下所示：

​

需求：

1. 左栏将永远是一个数字，中栏和右栏可以在一些问卷中交换位置。
2. 将有200项左右的问卷，超过多页。
3. 容器的宽度(圆角)此时固定在800 at，但是
4. 在不久的将来，它必须是灵活的/流畅的，才能在iPad和iPhone这样的移动设备上显示。

我试过什么

我试验了基于<table>的布局和基于<div>的布局：

<table>既干净又简单，但是开销很大，而且不太灵活，例如，如果我把中间和右边的列换成第2项的话.

基于<div>的布局更漂亮，我让容器浮动，但必须将divs设置为固定的宽度，以便使它们在列中对齐。在流体设计中，我不知道预先的宽度，这将是一个混乱的.

向专业人士提问：

1. <table>或<div>，关于我上面的要求，你更喜欢什么？
2. 有什么神奇的工具可以让这一切变得简单吗？
3. 您更愿意提供原始数据并让客户端脚本(jQuery)代替这个位置吗？

Answer 1

下面是一个代码示例：http://codepen.io/anon/pen/inmwD

使用包装div或列表元素。

<div class="parent">
    <div class="row">
      <div class="col1">1</div>
      <div class="col2">Content</div>
      <div class="col3"><input type="radio"/></div>
    </div>
</div>

Answer 2

1. 我认为，<table>是用于表的，<div>是用于布局的。
2. 是的，有一些样式模板通常命名为网格系统或css网格，请看一下这个堆栈：https://stackoverflow.com/questions/76996/what-is-the-best-css-grid-framework。
3. 我不会安排周围的元素与JavaScript，除非它不能用css，或是一个特殊的要求，从营销人员。这方面的缺点是增加了页面呈现时间。

看看这个用自定义的960网格系统制作的小提琴，它有6个宽150 at的列。

固定宽度：http://jsfiddle.net/UjXPR/

流体宽度：http://jsfiddle.net/UjXPR/1/

960 gs定制器：http://grids.heroku.com/

Answer 3

结帐自举网格系统