创建没有表格的列（相关css教程）
　　一般而言，表格存在着与布局技术一样的缺陷，因为当您布局包含表格的网页时，您会搞乱数据的逻辑流程。记得在本文开头我们说过，CSS 是 (X)HTML 之上的一层，而 (X)HTML 实际上是通过一种紧凑方式呈现的数据。不错，最佳的设计方式是以 (X)HTML 形式提供数据，没有任何设计或样式：如果它看起来是紧凑的，那么您可以应用一个 CSS 样式表。如果确实需要编辑 (X)HTML 来应用某种设计，请确保您禁用了 CSS，以查看它是否仍然是紧凑的。
　　出于两种原因，这样做非常重要。第一个原因是让它可供拥有特殊的视觉需求的人访问（因为他们将常常拥有自己的默认样式表设置或软件）。第二个原因是机器需要能够读取您的网站。搜索引擎和其他软件需要能够读取并跟踪您网站的代码，来为它建立索引。
　　那么，问题是如何创建没有表格的列？很简单，使用两个 <div> 框，如清单 4 所示。
　　清单 4. 列 div 的 (X)HTML 示例
<div id="left" class="equal-column">
</div>
<div id="right" class="equal-column">
</div>
<div class="something-below">
</div>
　　然后可以在 CSS 内设置各种设计属性。清单 5 提供了一个示例。
　　清单 5. 创建 div 列的 CSS 样式
div.equal-column {
  width: 45%;
  height:100%:
}
div#left {
 float: left;
}
div#right {
 float: right;
}
div.something-below {
 width: 100%;
 clear: both;
}
　　此标记将两列都设置为宽 45%，然后将左侧的列固定到左侧，将右侧的列固定到右侧。最后，使用另一个带有类 something-below 的 <div>，我们希望它占据两列下的整个屏幕。这是一种有用的技术，可用于快速、轻松地在屏幕上获得两列。
　　在 CSS3 中，还有另一个巧妙的概念，那就是文本列。换句话说，如果 column-count 属性设置为一个数字，一个段略会自动拆分为两段：
div#textual-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
　　此标记设置一个 ID 为 textual-columns 的 <div> 来得到两个文本列。但是，您可能已注意到，它让每列的高度相等，与您可以在报纸或杂志上看到列相比，这可能有点出乎意料。