Question

我需要布局页面，但我无法弄清楚如何在没有表格的情况下进行操作。我知道它一定是可能的，但是我想不出一个不是基于表格的解决方案，它对于所有东西来说都不是非常严格的固定宽度。

样机：http://i.imgur.com/jSSDhIh.png

无论我做什么，看起来我都会犯下重大罪。例如，顶部集合 - 看起来我将要么：

创建一个表（显然是所有邪恶的根源）
专门针对这些元素的硬编码宽度和高度。（#id或style =或一次性使用的类，这三个也被认为是邪恶的）

是这样的吗？有没有一种现实的方法可以避免这些情况？谷歌搜索答案只是给我一堆无用的“表格是邪恶的所以CSS表格也不使用ID选择或风格属性一切都必须是一个可重复使用的类”没有实际有用的信息。

Answer 1

表不是邪恶的。这个stackexchange页面上只有许多表。有些人想使用div来使用网格创建行和跨度。我建议在适当的地方使用表格。如果你真的想要避开它，可以考虑抓一些类似boot的bootstrap。 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem 在那里，您可以使用他们的脚手架以您想要的方式安排项目而无需桌子。

Answer 2

继承HTML Tables – when and how to use tables in HTML上的链接这可能有助于您了解何时使用表格。

在你的模拟器上没有理由不使用表格。像wordpress后端使用表格表格但表格形式。

但如果你真的想在div上布局这个，我建议使用css网格框架。我个人使用zurb基金会。 heres the link

Answer 3

我建议使用Bootstrap，它为样式表单提供了很多选项。（但是它可能会干扰你的其他CSS。）

以下是两列表单的工作方式：

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

<div class="row">

  <!-- right column -->
  <div class="span6">
    <label>Subject <input type="text"></label>
    <label>Category <select></select></label>
    <label><input type="radio"> Permanent Change</label>
    <label><input type="radio"> Temporary Change</label>
  </div>

  <!-- right column -->
  <div class="span6">
    <label>Requested Approval Date <input type="text"></label>
    Effective Dates <input type="text"> to <input type="text">
  </div>

</div>

显然造型有很多不足之处，但请查看http://twitter.github.com/bootstrap/base-css.html#forms以了解您可以做多少。您需要查看<form class="form-horizontal">。预先警告CSS很挑剔，你需要很多<div class="control-group">。

如何在CSS中布局网格

3 个答案: