在不总是有内容的情况下设计动态内容

Question

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

我正在尝试设计一个简单的“产品信息”模板。我使用的 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”标签会全部堆叠起来（因为标签通常是短文本）。是否有另一种设置样式的方法，以便在没有绘制内容时没有换行符 - 但是当有内容时，有换行符？

Answer 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 中没有任何内容可显示时，空白将被折叠。

Answer 2

我建议将您的标记更改为以下内容：

<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 样式设置为具有固定宽度，以便它们正确对齐。如果它们是空的，它们应该是不可见的。

Answer 3

如果您按照以下方式对其进行格式化，则没有问题：

<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/> ...