无表格的搜索结果

Question

我在php中实现搜索页面。 我需要显示如下图所示的结果

如何使用css实现这种设计。我想要一个流畅的设计，使用百分比加一个，即交替的行颜色改变。

另请告诉我如何限制列不超过50个单词。完整的细节将通过每行的超链接提供。

Answer 1

这是使用桌子的完美情况。

不要只是假设“无表格设计比使用表格设计更好”，表格应与表格数据一起使用，并且您的设计非常适合。

关于偶数/奇数行着色，如果您定位现代浏览器，请使用以下规则：

table tr:nth-child(even) { background-color: #c0ffee; }
table tr:nth-child(odd) { background-color: #123456; }

如果你也是旧版浏览器的目标，你可以使用javascript，JQuery派上用场：

$('table tr:even').css('background-color: #123456');

或者在服务器端代码中手动添加类。

关于行中字符数/字数的限制，这通常在服务器端完成。如果你使用像Smarty这样的模板引擎，那么你可能会有一个功能，但这也不是你自己卷起来的大事。

Answer 2

1。）这是一张桌子，为什么不使用桌子呢？ 2.）给每一行一个div，在div里面做一个固定的浮动div。 3.）参见此示例：http://www.bernzilla.com/design/tables/table.html