我的网站具有HTML结构,例如:

....
<div class="column1">dynamic_content</div>
<div class="column2">dynamic_content</div>
<div class="column3">dynamic_content</div>
...


现在,我想拥有这种结构,但是我想根据每一列的内容来控制该结构。例如:

一种。如果'column1'为空,我有两个选择:


仅使用2 div(column2和column3)输出HTML(使用PHP)。
通过CSS输出包括所有div的HTML,并通过CSS隐藏column1(显示:无)。


您认为哪个更好?

第一个选项有些复杂,因为我不知道每列中将包含哪种动态内容,并且使用PHP我需要处理整个HTML才能知道(column1,column2或column3)是否为空。我不想使用Javascript,只想使用CSS或PHP这两个选项之一。

现在好了,也许您在想我可以为每个页面使用默认模板。

例如,如果(pageXYZ)没有column1,我将使用类似

...
<div class="column2">dynamic_content</div>
<div class="column3">dynamic_content</div>
...


但这是最坏的情况,因为在将来,如果您需要修改整个模板,则需要修改每个页面。我不知道该怎么办。

最佳答案

您是否考虑过使用:empty CSS3伪选择器?您可以轻松地编写:

div.column1:empty, div.column2:empty, div.column3:empty {
  display: none;
}


在不使用PHP或Javascript的情况下完成同一件事。

另外,它将保留原始模板,而无需将来再进行编辑,并且允许在模板之外的某个位置更新规则。

08-25 12:06
查看更多