使用 CSS 制作分类列表
在看到这篇文章之前，我也不知道这种方法能够这么简单、快捷的解决问题，在以前的使用中我通常是左右两个浮动，右侧固定宽度，相对来说比这个方法要复杂好多，而结果也不尽人意，既然看到了这种方法，就顺便和大家一起分享下，让还不知道这种方法的人学会使用这种方法。原文地址：http://www.search-this.com/2008/08/13/my-css-is-cat-categories-with-css/
这篇文章的内容主要是介绍如何制作一个带图片和文字的产品列表。如果你使用过亚马逊的搜索，你会明白这是一种什么样的形式。
我将从向您展示一个成品开始，这样子可以很好的让您明白通过这种方法我们将完成什么样的目标。下边这个图片是我们最终结果的一个雏形。
图1
我们现在要制作一个类似的效果，但是不是用表格，在我看来，这并不是一个表格，他没有符合逻辑的行和列。即使您现在有一个很好的例子说明为什么要使用表格，但是请不要做过多的评论，我们这里讨论的仅仅是布局的技巧而不是完美的语义展示（对于这个范例）。这种方法可以使用在很多的场合，当然不是在表格中使用，你会发现它真的是很有用。
定义你的内容
首先你需要做的是确定使用哪个标签元素来定义你的产品列表。第一个想到的应该是用一个列表去做，但是我感觉它更适合使用一个定义列表（DL）来布局，因为产品的名字就相当于 DT，而文字介绍就相当于是 DD。（可能你不认同我的想法，但是不管你是用哪一种方法布局，我们的技巧、方法都同样适合。）
我将使用定义列表来做，因为它在语义上更适合我们的产品名字和产品介绍。
定义列表本身拥有一些默认的样式，比如 margin，但是我们可以通过一些简单的方法将他们重置。在这里演示中，我将采取重置所有元素的方法（即设置 *）来达到目的，但是我建议您最好看一下完整的方法。
下面我们开始思考我们要达到的效果。
产品的图片需要位于布局的左侧，文字要整齐的排列在图片的一旁，我们不想看到的是如下图所示的那样的效果：图片被文字包围，看起来很乱的感觉。
图2
您可以看到文字的最后一行，文字将图片包围了，它严重影响了我们的效果，我们将考虑如何避免复杂的方法去解决这种问题。
图片浮动到左边，我们可以让它跟右边的文字隔开一段距离，我们将从这个简单的设置来开始。
HTML：
<dl>
<dt><img src="images/product.jpg" alt="Product image" width="93" height="62" /><a href="#">The Name of the Product Goes here</a></dt>
<dd>
<p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here. The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p>
</dd>
</dl>
CSS：
*{margin:0;padding:0}
p{margin:0 0 .5em 0}
dl{
width:640px;
margin:0 auto;
border-bottom:1px dashed #ccc;
padding:10px;
overflow:hidden;
background:#f2f2f2;
}
dl img{
float:left;
margin:0 10px 0 0;
border:1px solid #000;
}
如果你运行了上边这段小代码，你会发现它和我们的图 2 很相似，图片完美的浮动在左侧，文字除了位于图片下面的那行外都排列在图片的右侧。
我们将很快解决这个问题，但是眼下很有必要提及一下浮动，浮动的元素是一直在浮动的，如果你想要它停留在一定的空间内，你就必须要对它进行清除。否则它将冲出自己所在的容器而插入另一个不少于它的高度的容器中。
在我们的例子中，我已经在 dl 上使用了 overflow:hidden; 来确保我们所有的浮动元素都处在 dl 之中。在大多数现代浏览器中，overflow 的属性除了 visible 以外都能保证盒子将他们的子元素控制在内。IE 6 需要保证元素拥有 haslayout 属性后才能达到同样的效果，我们只需要在适当的地方通过一个尺寸就可以达到目的了，不需要使用额外的 hack 了。overflow 并不总是一种很适合的方法，它在类似我们这样的布局中表现的很不错，但是你还是有必要了解一下其他的清除浮动的方法。
另外，需要提及的是，我将图片放到了 dt 里边，因为图片和产品标题其实是一样的。
让文字不在环绕
很多情况下，有些人会通过给文字加上一个 margin-left 来绕开图片，但这不是一个很好的解决方法，原因有三：
1)首先，你得图片可能是不固定大小的，也就是说并不是每一个图片的大小都是一样的，那么你的 margin-left 的方法将会失效，除非你设置一个比所有图片都宽的宽度。
2)第二个就是 IE6 的 3px 问题，固定的内容旁边的浮动会让显示看起来怪怪的，虽然很细微，但是也很让人恼火。
3)最后一个也是最重要的，当你需要在内容中放一个浮动的东西时，需要清除一下浮动，但是这将导致整个的内容滑落到图片的下方。图3就是这种现象的演示：
图3
幸运的是我们有一个很简单的方法去快速的解决这个问题（这种方法早些时候在 John 的文章中被提及过）。如果我们再一次在内容上使用 overflow 除了 visible 以外的属性，将会让他形成一个矩形而脱离旁边的图片，同样也会遵循图片的 margin。这就好比我们在图片的旁边放置了另一个浮动的盒子，但是其实我们并没有。
overflow:auto（或者 overflow:hidden）让元素形成一个矩形不仅仅只让它离开了旁边浮动的图片，同时还控制了它自己所有浮动的子元素。换句话说，他达到了清除浮动的效果。来自内部的 overflow:auto 的清除浮动仅仅局限在其内部，而并不能清除 HTML 上的所有浮动。
overflow 这种方法不能在 IE6 上使用，但是幸运的是我们可以通过强制元素拥有 haslayout 来达到同样的效果，而且，额外的我们因此而部分的解决了 3px 的问题，但是我们不想有一个高度，我们可以使用仅在 IE6 以及以下版本的 hack 来为 元素加上 height:1%。
因此，我们现在需要将下面这段 CSS 添加到刚才我们的 CSS 上：
dd{overflow:auto}
* html dd {height:1%}
当你运行这段代码的时候，你会发现和我们的图 1 的效果是一样的。
要和图 1 一样的话，我仅仅需要在产品名字中加一段文字。我将这段文字放到 <strong> 标签中，然后让其浮动到右侧。不过，这个浮动必须在内容的前边（除了极少数的浏览器不遵循之外，大多数都支持这种在同一行的内联元素的浮动，我们大可不必考虑），我已经将这部分内容放到了标题之前。
<dt> <img src="images/product.jpg" alt="Product image" width="93" height="62" /> <strong>Some info text here</strong> <a href="#">The Name of the Product Goes here</a> </dt>
现在我们已经达到了目标，通过相对比较少的代码，我们避免了很多的问题而达到了完美的效果。早先提过的部分的解决了 3px 问题，如果碰巧的在浏览器中发生了，你也可以轻松的通过 hack 来解决（减小图片的右 margin）。但是，我相信很多人不会注意到这小小的问题，所以我不必再使用另外一个 hack。
完整的演示你可以在这里看到，但是我希望你能复制到下这段代码进行练习、实践。
请各位注意，不要为 dt 标签添加 overflow:hidden; 属性，否则将导致整个设置无效。（南芝注）
标签： height:1%;, overflow
这篇文章发布于 2008年08月21日，星期四，17:28，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。