创建布局的最佳实践（使用服务器端代码）答案

【问题标题】：Best practices for creating layouts (using server-side code)创建布局的最佳实践（使用服务器端代码）
【发布时间】：2011-04-03 15:57:34
【问题描述】：

假设为了这个问题，我有一个容器元素，在该容器内有三列，右边距为 10 像素，在第三列上，我想将右边距设置为 0 像素。

现在有两种方法可以做到这一点，我可以使用 jquery 来选择第 n 个孩子，但我也可以在服务器端使用简单的循环计数来获取第三个元素。我的问题是实现这样的目标的推荐做法是什么？这样做服务器端意味着，即使在用户浏览器上禁用了 javascript，布局也能完美运行。但是，出于这些外观原因使用服务器端代码的想法可能不是理想的做法，服务器端应该严格用于功能。

我想知道人们对此有何看法。

【问题讨论】：

您似乎在使用错误的二分法，客户端与服务器端。使用 CSS 进行演示怎么样？
一般情况下我使用 CSS 进行展示，但也有像上例这样的情况，我不能使用 CSS，所以它要么是 JQuery，要么是服务器端。另一个例子是如果我想添加特定于项目的类名。我可以在 JQuery 中很容易地做到这一点，但如果用户禁用了 javascript，那么它就会成为一个问题。

标签： jquery html css server-side frontend

【解决方案1】：

使用 CSS :last-child 怎么样？

#container div:last-child { margin-right: 0; }

如果您真的关心 IE6，您可以在最后一列的服务器端代码中添加某种类（如 final-column），但不要使用内联样式。

#container div:last-child, #container div.final-column { margin-right: 0; }

最后，不要将 Javascript 用于样式目的。

【讨论】：

列表中的第三个项目呢？我可以使用 css nth-child 伪类，但它在 IE 中不起作用。
正如我写的，如果你想担心旧的浏览器，你可以在服务器端添加类。
好的，所以我通常不应该使用 JQuery 来进行这些布局更正？和我想象的一样。

【解决方案2】：

如果渲染后布局不改变，我相信使用服务器端 HTML 生成应该是一种更健壮的方式。

【讨论】：

是的，这是一种更健壮的方式，但这也意味着大量混乱的服务器端代码。