CSS布局实用技巧

时间:2007-03-07 16:13:49 来源: 作者: 点击:次出处:技术无忧

网络标准计划（ WaSP ）中的浏览器升级行动（ BUI ）已经促使许多设计人员朝着更加标准化的网页设计方向前进。使用CSS而不是表格来为网页布局能够节省用户带宽，同时增强页面的底层语义，可访问性及其范围。

“表格已死...”
已经有几位设计师在Jeffrey Zeldman的引领下发表了一些指南，这些指南曾经帮助我们度过无表格设计的困难时期。最初的努力主要是集中在通过CSS定位（CSS positioning）来代替表格创建两个或者更多的列。因此需要考虑一个（完全）不同的显示结构。这些边框技术已经被编辑为文档，你可以在Eric Costello 的网站 glish 以及Rob Chandanais 的网站 Blue Robot 上找到。

其它一些站点也有参与，包括Owen Briggs 的方盒课程（Box lesson）以及由Eric Costello 撰写，Tantek Çelik 解释的方盒模型工作区 (box model hack/workaround)。Dotfile 列出了上百个使用CSS布局的站点。

“...表格长存”
当这些卓越的资源都在致力于仅用CSS定位来创建总体布局这一重点时,作为设计师的我们也发现了另一些很实际的问题。这些在表格中能轻易解决的问题，对CSS来说却不那么明显。这样的问题在 Webdesign-L 列表中以主题“表格已死 ... 表格长存”发表。

问题所在
假设你有一大堆的缩略图，每一张都链接着这幅图片的原始大小版本 — 这是一种相当普遍的网页。进一步假设，每一张图片都有一个简短的标题，你希望它们居中于图片下方。并且，考虑到浏览器窗口的大小问题，你希望将这些图片和标题成对出现，按行排列在屏幕上。但是，还必须能够随着浏览器宽度的改变而自动换行（流动式设计）。由于这最后一条要求，我们必须放弃使用表格，而运用CSS。

步步为营
让我们一步一步地来看。首先是要求缩略图的下方有居中的标题。这一步相对简单：找到HTML代码中放置图片的部分，添加换行，然后将标题放在居中对齐（用CSS实现）的段落里。

接下来要将这些图片和标题成对地排列在浏览器的窗口中。如果使用表格，每一对图片和标题将进入一个独立的单元格，而使用CSS我们需要把它们放进独立的层中。为了使它们在窗口中水平排列，只需在样式表中将层的浮动属性设置为向左浮动。

这段CSS代码应该是这样的：

div.float {
float: left;
}

div.float p {
text-align: center;
}HTML代码如下：

<div class="float">
<img src="image1.gif" width="100" height="100"
alt="image 1" /><br />
<p>caption 1</p>
</div>

<div class="float">
<img src="image2.gif" width="100" height="100"
alt="image 2" /><br />
<p>caption 2</p>
</div>

<div class="float">
<img src="image3.gif" width="100" height="100"
alt="image 3" /><br />
<p>caption 3</p>
</div>在浏览器中显示如下：