1

好的，所以我的标题很糟糕。反正-

我正在尝试设计一个简单的“产品信息”模板。我使用的 CMS 从标签中提取动态产品信息。看起来像这样 - div 的样式是这样的，它们排成两列：

 <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 文件中提取）是空的。标签是智能的，如果相应字段中没有内容，则不会显示 {_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>

Then style span.label and span.data to have a fixed width so they align properly. If they're empty, they should be invisible.

于 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 回答