1

OK、だから私のタイトルはひどいです。ともかく-

シンプルな「製品情報」テンプレートのスタイルを設定しようとしています。私が使用している CMS は、タグから動的な製品情報を引き出しています。次のように表示されます - div はスタイル設定されているため、2 つの列として並んでいます。

 <div class="specslabel">

        <strong>

        {rs_size_lbl} <br />
        {rs_material_lbl} <br />
        {rs_application_lbl} <br />
        {rs_fitting_system_lbl}

        </strong>  

        </div>  

        <div class="specs">

        {rs_size} <br />
        {rs_material} <br />
        {rs_application} <br />
        {rs_fitting_system}    


    </div>

これらすべてのタグが情報を適切に取り込んでいる場合、すべて正常に機能します。ただし、これらのフィールド (CSV ファイルから取得) の 1 つが空である場合があります。タグはスマートで、対応するフィールドにコンテンツがない場合、{_lbl} (フィールド ラベル) のコンテンツは表示されません。次に、明らかに改行のため、空白行があります。

改行を使用しないと、「_lbl」タグがすべて積み重なってしまいます (ラベルは通常短いテキストであるため)。コンテンツが描画されていない場合は改行がなく、コンテンツがある場合は改行があるように、これをスタイルする別の方法はありますか?

4

3 に答える 3

1

HTML を書き直して、アイテムにラベルを付けます。

<div><span class="specslabel">{rs_size_lbl}</span><span class="specs">{rs_size}</span></div>
<div><span class="specslabel">{rs_material_lbl}</span><span class="specs">{rs_material}</span></div>
<div><span class="specslabel">{rs_application_lbl}</span><span class="specs">{rs_application}</span></div>
<div><span class="specslabel">{rs_fitting_system_lbl}</span><span class="specs">{rs_fitting_system}</span></div>

次に、CSS を次のように定義します。

.specslabel {
    display: inline-block;
    width: 45%;
}

.specs {
}

ラベルもデータも何も取得しない場合、その項目の html は としてレンダリングされ<div></div>、デフォルトでは高さはありません。したがって、表示するものが div にない場合、空白は折りたたまれます。

于 2012-05-15T21:13:42.123 に答える
1

マークアップを次のように変更することをお勧めします。

<div class="specs">
  <div class="spec">
    <span class="label">{rs_size_lbl}</span>
    <span class="data">{rs_size}</span>
  </div>
  <div class="spec">
    <span class="label">{rs_material_lbl}</span>
    <span class="data">{rs_material}</span>
  </div>
  <div class="spec">
    <span class="label">{rs_application_lbl}</span>
    <span class="data">{rs_application}</span>
  </div>
  <div class="spec">
    <span class="label">{rs_fitting_system_lbl}</span>
    <span class="data">{rs_fitting_system}</span>
  </div>
</div>

次に、span.label と span.data のスタイルを固定幅にして、適切に整列させます。空の場合、非表示にする必要があります。

于 2012-05-15T21:19:15.017 に答える
0

次の方法でフォーマットすれば、問題はありません。

<style>
    strong span { float:left; clear:left; }
</style>

<strong>

    <span>{rs_size_lbl}</span>
    <span>{rs_material_lbl}</span>
    <span>{rs_application_lbl}</span>
    <span>{rs_fitting_system_lbl}</span>

</strong>

それ以外の場合は、適切に出力するようにサーバー スクリプトを変更する必要があり<br/>ます ...

于 2012-05-15T21:08:17.820 に答える