如何用css作为网格排列div？

Question

我想在浏览器中向用户呈现动态生成的（PHP，XML）问卷，如下所示：

要求：
 1.左栏将始终是一个数字，中间和右栏可以在一些问卷中交换位置  2.将有多页200件左右的问卷调查问卷  3.此时容器的宽度（圆角）固定为800px，但是  4.在不久的将来，它必须灵活/流畅，才能在iPad和iPhone等移动设备上显示。

我尝试了什么
我使用基于<table>和<div>的布局进行了实验：

<table>干净简单，但开销很大，而且不够灵活，例如如果我只交换第2项的中间和右列......

基于<div>的布局更加流畅，我让容器浮动，但必须将divs设置为固定宽度，以使它们在列中对齐。在流畅的设计中，我不知道提前的宽度，这将是一个烂摊子......

对专业人士的

问题：
 1. <table>或<div>，就上述要求而言，您更喜欢什么？  2.是否有一些神奇的工具可以让它变得简单易用？  你愿意提供原始数据并让客户端脚本（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列，宽度为150px

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

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

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

Answer 3

结帐bootstrap grid system

Answer 4

  

1. <table>或<div>，就上述要求而言，您更喜欢哪种方式？

div专门用于页面布局，表格专门用于放置表格数据。所以在你的情况下，我会选择问卷的表格布局。

  

2.是否有一些神奇的工具可以让它变得简单易用？

首先要设计出这个行数据应该如何才能实现该网站。

  

3.您愿意提供原始数据并让客户端脚本（jQuery）进行定位吗？

这不是一个好主意，但如果客户需要，你可以这样做。

  

还有一件事，你不是用SO问你问题，而是问我们喜欢什么，这对SO用户来说不是好习惯。