0

私のウェブサイトには次のような HTML 構造があります。

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

今、私はこの構造を持ちたいのですが、各列の内容に応じて構造を制御したいと考えています。例えば：

を。「column1」が空の場合、2 つのオプションがあります。

  1. 2 つの div (column2 と column3) のみで HTML を出力します (PHP を使用)。
  2. すべての div を含む HTML を出力し、CSS (display:none) を介して column1 を非表示にします。

何が良いと思いますか？

最初のオプションは少し複雑です。各列内にどのような種類の動的コンテンツがあるかわからないためです。また、PHP を使用して HTML 全体を処理し、(column1、column2、または column3) が空かどうかを確認する必要があります。私は Javascript を使用したくありません。CSS または PHP の 2 つのオプションのいずれかを使用したいだけです。

各ページのデフォルト テンプレートを使用できると考えているかもしれません。

たとえば、(pageXYZ) に column1 がない場合、次のようなテンプレートを使用します

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

しかし、これは最悪です。将来、テンプレート全体を変更する必要がある場合は、各ページを変更する必要があるからです。どうすればいいのかわからない。

4

1 に答える 1

0

:empty CSS3 疑似セレクターの使用を検討しましたか? あなたは簡単に書くことができます：

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

PHP や Javascript を使用せずに同じことを達成するために。

さらに、将来編集に頼ることなく元のテンプレートを保持し、テンプレート外の 1 か所でルールを更新できるようにします。

于 2013-03-08T03:19:12.410 に答える