php - 无表搜索结果

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 这样的模板引擎，那么您很可能拥有一个函数，但是您自己也可以将其汇总起来也没什么大不了的。