产品列表到底应该怎么做?
作者：Lucars 来源：Alibaba.com UED 发布时间：2009-01-02 16:34:00
最近随着狂风计划的席卷，我也终于开始橱窗产品位列表展示的编码工作，这只是一个改进项目，因此有原代码可供参考。但是当我打开原代码模板的时候便愣住了，一个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的事情也为了团队的面子，怎样也不能使用上面三种投机取巧的办法来敷衍这个现实的问题吧，因此就有了这篇博客最重要的内容。
0
投稿猜你喜欢
- global 属性返回 Boolean 值，指出正则表达式使用的global 标志 (g) 的状态。默认值为 false。只读。rgExp.
在学校修管理学的时候，有讲过一个管理激励的理论。管理激励是基于行为和认知科学的研究，来发现人们的需要、动机、目标和行为四者之间关系的核心理论- 在这篇文章（不敢妄称教程，最多称之为学习笔记）里，我会从头开始实现客户端模板的效果。不过你不要期望能够在这里找到可以直接拿去使用直接复用灵活
- ADO也提供更有效率方法来取得数据。GetRows 方法传回一个二维的数组变量，每一行对应Recordset中的一笔记录，且每
- vbscript脚本中，fso对象CreateTextFile方法调用时可能会报“无效的过程调用或参数”错误，在使用ASP生成静态页面时，如
- Mysql数据库常用命令：启动Mysql数据库C：》cd Mysql5.0 binC:Mysql5.0 bin》mysqld –instal
- 到现在为止，你只学习了如何根据特定的条件从表中取出一条或多条记录。但是，假如你想对一个表中的记录进行数据统计。例如，如果你想统计存储在表中的
- Object 类型的对象虽然有 toString 方法，但结果却是 [Object Object] 让人没法理解的字符。比如简单的对象：{n
- Dreamweaver从出道以来，其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在Dreamweaver
- 作用：用ASP程序将页面中的电话号码生成图片格式。 代码如下:<％ Call Com_CreatValidCode
- 感谢 Dawn CSS Reset 的尝试和建议。针对字体的写法，觉得需要说明一下：body,button, input, select,
- Mr.Think是一个喜欢简洁的人,喜欢如诗一样的代码.不喜欢.NET的代码,就是因为经常看到同事用VS后生成出来的一段段冗长的代码.在我的
- 应该是开心网(kaixin.com)的宠物功能又升级了，这几次发来的邮件内容不仅不能让我开心，反而让我觉得很恶心。开心网注册也一段时间了，之
- 文通过一个操作实例来说明SQL中主标识列IDENTITY的使用技巧。要求：在 sql server 2005中，建立数据表book，在表bo
- 什么是合并多行字符串（连接字符串）呢，例如： SQL> desc test; Name Type Nullable Default C
- photoshop快捷键大全: 工具箱(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取)相关文章：网页设计软件FrontPag
- 表中主键必须为标识列，[ID] int IDENTITY (1,1)1.分页方案一：(利用Not In和SELECT TOP分页)语句形式：
- 在asp中利用excel的一个方法是将excel文件作为一个数据库进行链接,然后的操作和对access数据库操作类似.但是这个方法不是总能有
- 如何使用Index Server建立一个网站导航地图？程序代码如下：＜html＞＜head＞＜title＞asp教程之网站导航 -
- Access爱好者以会VBa为荣。我觉得这不是好现象。vba只是vb的子集，有着很多限制，比如不支持继承，不支持指针，不支持子界类型等。使用
