동적 콘텐츠 스타일 지정 항상 콘텐츠가없는 경우

Question

확인, 내 제목이 끔찍합니다. 어쨌든 -

간단한 "제품 정보"템플릿을 사용하려고합니다. 내가 사용하는 CMS는 태그에서 동적 제품 정보를 가져옵니다. div의 그들이 두 개의 열로 줄 수 있도록 스타일된다 this- 것 같은데 : 모든 태그가 제대로 정보를 당기는 때 모두가 잘 작동

<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

하는 것은 아무 문제가 없을 것 그렇지 않으면

<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/>을 변경

Answer 2

재 작성을해야 할 것 귀하의 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> 

그런 다음, 라벨이나 데이터도 아무것도 얻을 때, 그 광고 항목에 대한 귀하의 HTML이 더이있는, <div></div>로 렌더링되지 않습니다되어 무슨 일이 일어날 지

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

.specs { 
} 

로 CSS를 정의 기본적으로 높이. 따라서 div에 아무것도 표시되지 않으면 공백이 축소됩니다.

Answer 3

나는 이런 식으로 마크 업을 변경 권 해드립니다 : 제대로 정렬되도록

이

<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는 고정 폭을 갖도록. 비어 있으면 보이지 않아야합니다.