产品列表到底应该怎么做?
作者：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
投稿猜你喜欢
- 本文实例讲述了Python实现动态给类和对象添加属性和方法操作。分享给大家供大家参考，具体如下：动态给类和对象添加属性定义一个Person类
本文参加新星计划人工智能(Pytorch)赛道：https://bbs.csdn.net/topics/613989052一、强大的 hub- 作为一个数据分析师，应该信奉一句话——“一图胜千言”。不过这里要说的并不是数据可视化，而是一款全民向的产品形态——表情包！！！！表情包不仅仅
- 前言本文主要给大家介绍了关于Django实现内容缓存的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。1.缓存的简
- 像素误差看自己设计好上线的网站，偶尔会发觉像素行间出现了弹性空间，总在不经意间蹦出一定的差距。有些页面很难发现，比如活动类页面，这类页面多呈
- 前言本文主要分享一个python代码，可以将多个视频中的音频转化为相同采样率的视频。对视频格式的校验没有做，也不是很关键。环境依赖ffmpe
- 经常看到朋友圈或者空间里有朋友发布照片时,将朋友圈的照片切分为九宫格,参考了一些大神的博客资料,现整理如下;将图片分拆成九宫格的思路：读取图
- 文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法，单独监听事件。这样代码书写较为简练，容易管理
- 本文实例讲述了golang语言中for循环语句用法。分享给大家供大家参考。具体分析如下：for循环是用来遍历数组或数字的。用for循环遍历字
- cache 是一个带索引带超时的缓存库目的在于优化代码结构，提供了若干实践。 https://github.com/weapons
- 1.预备知识python语言，scrapy爬虫基础，json模块，flask后端2.抓取CSDN数据接口使用谷歌抓包工具抓取CSDN搜索引擎
- 详解 sys.argv关于 sys.argv 可得好好说道说道了。当初我可是被折磨的不要不要的，上一章节我们提到 argv 是获取程序外部的
- 问题最近在Laravel项目中用到了百度编辑器，插入到数据库我保存的是原始的html标签代码，没有进行实体转义。然后在修改的时候，需要读取到
- 利用Python中的socket模块中的来实现UDP协议，这里写一个简单的服务器和客户端。为了说明网络编程中UDP的应用，这里就不写图形化了
- 1.Django默认已经提供了认证系统Auth模块。认证系统包含：用户管理权限用户组密码哈希系统用户登录或内容显示的表单和视图一个可插拔的后
- python版本: Python 2.7.61: sys是python自带模块. 利用 import 语句输入sys 模块。当执行impor
- 目录概述自动建库实现步骤具体思路代码实现数据库初始化器DatabaseInitializer简单的主程序FlywayApplication执
- 1.相关函数df.dropna()df.fillna()df.isnull()df.isna()2.相关概念空值：在pandas中的空值是&
- 前言功能新增学生显示学生查找学生删除学生存到文档创建入口函数在入口函数中，可以先打印一个菜单，用菜单来进行交互。def menu(): &n
- 主要就是通过jieba的posseg模块将一段文字分段并赋予不同字段不同意思。然后通过频率计算出热频词数据放在文章里面了，就不用花积分下载了
