風格動態內容，其中並不總是內容

我試圖設計一個簡單的「產品信息」模板。我使用的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」標籤全部堆疊起來（因爲標籤通常是短文本）。是否有另一種方式來設置這種風格，以便在沒有內容繪製時，不存在換行符 - 但是當有內容時，會出現換行符？

來源

2012-05-15 Adam Skelly

如果您通過以下方式格式化它那裏會是沒有任何問題：

<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-15 21:08:17 xandercoded

（編輯 - 從來不是我是一個白癡）Xander-你真棒。謝謝朋友！ –

只要注意'font-size'和邊距問題;如果最終每個標籤和相關項目的高度稍有不同，則這樣做可能會破壞垂直對齊。 – saluce

重寫您的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-15 21:13:42 saluce

這似乎也是一個好主意。我是一個非常業餘的人，所以我會嘗試所有這三個 - 至少我會學到三種可以接受的方法來做到這一點。 –

這個答案和@Chris_Doggett是一樣的，只有他的HTML比我發佈的空白更多。我發現，雖然在大多數情況下，空白符被忽略（所有都被摺疊成一個空格），但有時它可能會對格式問題造成嚴重破壞。 – saluce

我建議改變您的標記是這樣的：

<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-15 21:19:15

這看起來像它也會完美。我也會試試看它是如何工作的。 –

風格動態內容，其中並不總是內容

回答

相關問題