1

我想在浏览器中向用户展示动态生成的（PHP、XML）问卷，如下所示：问卷排版草稿

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

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

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

基于<div>的布局更时尚，我让容器浮动，但必须将其设置divs为固定宽度才能使它们在列中对齐。在流体设计中，我事先不知道宽度，这将是一团糟......

向专业人士提出的问题：
1.<table>或者<div>，关于我上面的要求，您更喜欢什么？
2. 有没有什么神奇的工具可以让这变得又好又简单？
3. 您宁愿提供原始数据并让客户端脚本 (jQuery) 来代替定位吗？

4

4 回答 4

3

这是一个代码示例：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>
于 2013-07-10T08:11:18.193 回答
1
  1. 在我看来<table>是为了表格<div>是为了布局。
  2. 是的，有一些样式模板通常命名为grid system或css grid看看这个堆栈：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/

于 2013-07-10T08:40:35.120 回答
0

1. <table>或者<div>，关于我上面的要求，你更喜欢什么？

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

2.有没有什么神奇的工具可以让这变得又好又容易？

第一个梦想设计这个行数据应该如何看待然后只为网站完成。

3.您是否愿意提供原始数据并让客户端脚本 (jQuery) 来代替定位？

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

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

于 2013-07-10T08:47:44.830 回答
0

结帐引导网格系统

于 2013-07-10T08:14:23.043 回答