最近随着狂风计划的席卷，我也终于开始橱窗产品位列表展示的编码工作，这只是一个改进项目，因此有原代码可供参考。但是当我打开原代码模板的时候便愣住了，一个4 × n的矩阵为了执行div + CSS的标准而放弃使用非常牛B的table布局，这本无可厚非，可是由于“某原因”（后文会陈述）却让本来很有优势的div布局失去了原有的优势，在我反复思考这个问题的时候怎样都觉得table布局能比现在的这个更加合适。那么这个非常霹雳的布局是怎么样的呢？请见下图：
产品列表结构图（png太牛B了只有18K）
我想绝大多数UEDer都不会使用如上布局来实现这个模块，首先想到的当然是使用DIV[productItem]做4 × n次的循环，然而这个布局却使用程序控制每四个DIV[productItem]给它们套一个DIV[productListRow]。可能很多人都已经发现了，这个布局有一个先天性的不足，也就是前文提到的“某原因”，那就是由于产品简介的长度不同导致每个DIV[productItem]的高度不同，因此需要在每行列表后面都清除浮动以让浏览器可以做出正确排列。那么解决办法也就出来了，很简单，有如下几个：
1、最方便、最有效、性价比最高的方法就是我们当然可以知道最长长度的产品名称和产品简介，因此我们分别取这两个值排满的最高高度来作为DIV[productItem]即可，但是这个方法却有致命的缺点导致所有UEDer都不会这么做得，那就是当出现有人不填写产品简介或者产品简介填写得非常少的时候便会出现大段的空白严重影响观看阅读。
2、那就这样把，咱把“产品简介”给拿掉吧，然后使用方法1便可以完美解决问题了。这个想法非常牛B，可是它太牛B了，我绝对不敢这样操刀直接把这么重要的内容给砍掉（也许有人觉得这些内容并不重要，但是这不是这篇文章所要讨论的东西）。我对曾经抱有次想法表示遗憾和羞愧。
3、为什么不使用table布局呢？天哪我觉得这简直就是最完美的办法了，table一出八马难追的。能够自适应高度的table在这个应用上拥有绝对的优势啊，如果前端开发工程师们可以放下一点架子在html上使用它原本应该使用的结构该是多么美好的事情，我直到在写这篇博客的时候依然觉得使用table解决问题又快又省力还很有快感哦~（其实原代码中的div布局就是抄袭了table的“思想理念”了）
但是作为一个在非常牛B的UED团队的还是菜鸟的我为了要做出非常牛B的事情也为了团队的面子，怎样也不能使用上面三种投机取巧的办法来敷衍这个现实的问题吧，因此就有了这篇博客最重要的内容。
第一次尝试：
首先我们还是来考虑考虑到底使用什么标签来写这个列表吧，所谓back 2 base嘛。重新分析列表中最重要的元素有且仅有：标题、图片、简介。显然标题是最重要的，作为一个product的title存在，而图片和简介都是用来描述标题的内容，因此第一个想到的标签就是dl，这样便有了以下布局（抱歉还没有时间整一个代码输入）：
<dl>
<dt>[name]</dt>
<dd><div>[photo]</div><div>[intro]</div></dd>
</dl>
对dt和dd都做float:left，dt做一个margin-top:100px来定位到图片和简介中间，dd做一个margin-left:-25%来定位到和dt相同的x坐标（由于无法输入代码就不贴css了）这样的html是我认为最贴切的，根据现在流行的html语义化定义这样的布局太合适不过了。当然css中还是存在非常多的困难，而前面所说的“某原因”也并没有得到解决，反而更甚了，因为把标题和简介流拆开后，标题过长便会和简介的文字叠加根本无法阅读！然而经过几秒钟的思考后认为这玩意儿的解决已经超出了我的范围了。当然，有人可能会说把标题和图片换一个不就可以了么？是的，没错，但是如果这样的话使用dl标签还有什么意义呢？可能有意义吧，就是标题和简介都是为了说明这张图片而存在的，但是真的可以这么想吗？还有待实验去证明，这里就不讨论了。
第二次尝试：
如上所述，dl的存在就没意义了，那就算了吧，退而求其次使用ul（请在砸我鸡蛋前念着我还死了那么多脑细胞在这个上面的份上轻点儿吧），无序列表虽然不如定义列表来得语义那么强烈，但至少它还是和列表吧，至少不是一个division吧。ul的布局相比较就简单多了，看上去也只是把div标签换成了li而已，那么html结构如下：
<ul>
<li><div>[photo]</div>
<div>[name]</div>
<div>[intro]</div>
</li>
</ul>
到这个时候终于要直面本文第四次提到的“某原因”了，如何解决li浮动后高度不同导致的矩阵错位问题？最先进入脑子的想法就是记得很久很久以前看到过一篇关于div自适应高度的文章，于是就在google翻找，当时没有收藏真是太失误了。在google搜索自适应高度那是相当多呀，但是有一篇文章是不得不借鉴的，但是这篇文章并不是适应于我们的案例，很显然它更适用于两栏或者三栏布局，而我们至少有四栏甚至五栏。自此还有什么办法可以让多列布局自适应高度呢？（请不要跟我提关于巨大的padding与负margin这件事）伪装的自适应对于需要货真价实产品的我们是没有用的……至此思维告一段落，我需要回到源头来，最开始的出发点在哪里？如果只是为了清除浮动的话？使用最简单的方法？
带着上面的问题，便渐渐有了解决方案，不可避免的，我可能需要借助后台工程师的力量了，我在每4个li之后的那个li上加上clear:left属性，以清除左边的浮动来防止它因为前面li的高度不够而导致的错位，从它之后的li就应该会乖乖地跟在它的后面了。这个想法很美好，但是很天真，可能我确实在FF等标准浏览器下面获得了预想中的效果（没有想到实现起来那么简单，正在开心中），突然发现又是那该死的IE！！！那个加了clear属性的li确实正常显示了，但是在它之后的那些继续原来它应该范的错误，没有起到清除整行浮动的作用。我懊恼了~通过漫长的研究至今已经找到了一个语义和样式都比较平衡的点却无法在IE中得以实现，怎么办？
第一个想法就是使用hack技术（虽然UEDer们都不推崇，但是为了维护之前的成果，老子发飙了），问题就是如何做hack。先看这样的例子，如果我每4个li后面都插一个<li style=”clear:both;float:none;”></li>的话，不管在IE下还是在FF下都可以完美地完成任务，但是这个方案有一个致命的缺陷，就是对原有html语义的破坏，凭什么好好的列表突然就多出一个空li来？那么能不能在不影响原来语义的情况下，在FF依然使用它应该使用的clear:left方式的情况下来针对IE进行hack呢？非常幸运的是IE给我们提供了条件注释工具<!–[if IE]><![endif]–>（我想一旦开始使用这个东西之后一定会非常依赖它的），因此html结构就变成了这样：
<li>[productItem]</li>
<!–[if IE]><li class=”clearForIE”></li><![endif]–>
<li class=”clearForFF”>[productItem]</li>
希望这样能够看得懂。至此为了尽力表述完整语义的目的就达到了，因为所有的浏览器、搜索引擎和用户都会把那段IE的hack作为一个普通的注释来看待（这里也包括IE自己，这是一段条件注释，那还是注释），因此产品列表的li就没有被中途无故打断，更不会像最早的div版本每四个是一个division。到这里研究工作就算完成了（关于这个IE特有的hack的可能的严重后果木有给予考虑。。。），不过还有一些额外的思考。
其实使用division也不完全是不好，如果division这样做：
<div class=”top20″>
<div class=”top15″>
<div class=”top10″>
<div class=”top5″>
DIV[productItem]{1-5}
</div>
DIV[productItem]{6-10}
</div>
DIV[productItem]{11-15}
</div>
DIV[productItem]{16-20}
</div>
偶也觉得应该用Table……
偶也做过类似的页面，但也没有选择Table，因为要实现浮动排版……根据屏幕宽度显示尽可能多的列……
如果没有浮动排版的需求，为什么不用Table呢？为什么呢？为什么呢？
[回复]
习惯了高度不可控的情况下用table了。
但是，如果简介只有三行的情况下还是可以给定高度，设定字数超出截取的对吧～就算是用户简介填写的少，留白看起来也干净～
[回复]
[...] Alibaba.com UED » Blog Archive » 产品列表到底应该怎么放? (tags: css 自适应 产品列表 代码优化 alibaba) [...]
如果给每个li限定一个常规的高度,,在提取产信息的时候限定字数,,是否能解决因为高度无法统一而浮动错位的问题呢???
[回复]
我一般是限定死簡介的字符數，然後限定死高度，然後用的是ul。。
[回复]
嗯，限定高度和字符数确实是不错的选择，优选方案啊
不过既然是简要的描述，如果这都截取了字符的话就变得语义不通了
[回复]
我不知道这里的简介允许最大字数是多少。
然后我也不知道这里的简介多数人会怎么填写，多或少？
所以，经过一段时间的运营后，可能，有可能此布局会乱78糟的，呵呵。
－－
简介即使是被省略为…了，其实也不存在语义不通。简介，那么是简单的介绍，不能是无限的！对有限的输入作限制是设计原则。
那么这个简介的输入可以限字数，比如20个，然后说明超出后…，我想用户填写简介时也就自然而然“三思”了。同样，过多的描述，购买者的角度来说，在此页面迟疑更多。
反倒是产品名是一定不能被…的。
[回复]
赞楼上的同学思考得那么仔细
简介的字数确实是有限制并且用户也被严格限制只能填写那么多字符
这个简介存在的意义也在于能在列表上适当描述产品的核心内容，譬如产品名是“Sharp 夏普 42GE5A液晶电视”
我至少得知道这是
1、42寸的
2、1920×1080的
3、全接口的
4、Full HD的
液晶电视
在目前产品属性技术还没有达到非常强大的情况下，使用“简介”是一个不错的手段。
不过确实，这样让用户“三思”的字段在表单里确实并不是长久之计。
[回复]
首相我想说，你的方法很牛吧，很值得参考，另外你这篇文章废话稍微多了点！
[回复]
赞成用dl来做产品列表，至少在语议上符合规范
但我不明白，photo为什么要放在DIV里面，你不能img{display:block;}吗？而下面的简介为什么要用DIV,用P不是更能说明问题吗？或者说用UL的列表来说明夏普液晶电视的参数。。。
至于productItem高度的问题，可以定高，正如楼上Lucars所说。
[回复]
如果用div，又可以修改后台，还不如分块：
#test-block {
width: 300px;
}
.product {
float: left;
width: 100px;
overflow: hidden;
background: #eee;
}
.block {
overflow: auto;
width: 100%;
}
line1line2line3
line1line2
line1
line1line2line3
line1line2
line1
line1line2line3
line1line2
line1
[回复]
。。。不能贴代码
＜div id=”product-list”＞
＜div class=”block”＞
＜div class=”product”＞line1＜br /＞line2＜br /＞line3＜/div＞
＜div class=”product”＞line1＜br /＞line2＜/div＞
＜div class=”product”＞line1＜/div＞
＜/div＞
＜div class=”block”＞
＜div class=”product”＞line1＜br /＞line2＜br /＞line3＜/div＞
＜div class=”product”＞line1＜br /＞line2＜/div＞
＜div class=”product”＞line1＜/div＞
＜/div＞
＜div class=”block”＞
＜div class=”product”＞line1＜br /＞line2＜br /＞line3＜/div＞
＜div class=”product”＞line1＜br /＞line2＜/div＞
＜div class=”product”＞line1＜/div＞
＜/div＞
＜/div>
[回复]
每4个LI加这个=。=
就这东西就呆后端判断了=。=
[回复]
很长一文,还是LI,本人强烈推荐
_______list
dt
dd
dd
dt
dd
dd
dt
dd
dd
[回复]
我写了一下
可查看
http://www.9icss.com/article/W3C/4.htm
[回复]
回蝌蚪同学，特地为img外面套一个div是为了让图片可以在一定范围内居中对齐
[回复]
哈哈，芋头同学方法很有趣，很赞
我也考虑过部分显示和鼠标hover的效果
不过并没有把它实现出来
后面没有跟踪这个问题了
现实的产品好像是就是用得部分显示的方案来做的
[回复]
我想知道，“很有趣”，是个怎样的形容词？
[回复]
回 Lucars
特地为img外面套一个div是为了让图片可以在一定范围内居中对齐
dl{width:25%;float:left;}
dl dd img{display:block; margin:0 auto;}
dl dd p{text-align:center;}
这行代码应该能满足居中要求
[回复]
俺重构过的一个页面，用到两种图文的布局：图上文下，图左文右。
div+css结构:http://www.kinderly.com/xmzt/akly/akly-div.html
table结构:http://www.kinderly.com/xmzt/akly/akly.html
[回复]
其实可以用inline-block来实现
http://blog.12km.com/index.php/archives/37/
[回复]
[photo]
[name]
[intro]
请问，web标准何在？
不如不说。
[回复]
请问不是每4个产品有套一个DIV[productListRow]吗？ 清除行级错位可以在行级的DIV 上做文章否？
[回复]
刚开始做自己网站的时候我记得第一个做的就是table，
直到大学毕业前夕才开始用xhtml+css即div+css，
相对而言：
1:感觉xhtml+css比较容易后期的修改，但是在不同浏览器firefox/ie/chorme等等，尤其是ie,这个微软的私生子下面不同的兼容问题很麻烦，要做css hacker;
2:dl,dt,dd相对于table,tr,td的优势在于代码更简洁更平滑更符合语义化。
3:这段时间在研究seo,用xhtml+css相对于table，据说效果更好。
[回复]
我觉得像这种 product list 做高度自适应是个昏招… 为什么不能去限定简介的字数? 高度自适的话, 就算做出来了, 也会导致一块产品很高, 一块产品很低的情况, 这样中间一样会出现很多空白.
而且上面也有朋友说到了, 规定字数也可以规范 PM 人员的文案, 不能什么问题都让前端来解决… 这些不合理的需求就得去找客户理论.
PS, 博主的 HTML 代码感觉还是语义不够啊… 个人意见, 呵呵
[回复]