我的网站具有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的情况下完成同一件事。
另外,它将保留原始模板,而无需将来再进行编辑,并且允许在模板之外的某个位置更新规则。