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

在没有内容的情况下设置动态内容的样式

3 个答案: