cfloop 태그 내의 div 태그로 인해 원하지 않는 줄 바꿈이 발생합니다.

Question

ColdFusion에서 SQL 테이블의 내용을 보여주는 웹 페이지가 있습니다. 내용은 cfloop을 사용하여 반복되고 div 블록을 사용하여 렌더링됩니다. 페이지에 표시됩니다 무엇

<cfloop query="qry1"> 
<div class="subBlock"> 
    <div class="item"><h4>Date:</h4><p>#qry1.date#</p></div> 
    <div class="item"><h4>Name:</h4><p>#qry1.name#</p></div> 
    <div class="item"><h4>Address:</h4><p>#qry1.address#</p></div> 
</div> 
</cfloop> 

follows- 내 코드는 그래서 문제는 내가 그 줄 바꿈을 얻고 있다는 점이다

Date: 

06/01/2009 03:40 PM 

Name: 

XYZ ABC 

Address: 

ZZZ St. 

같은 - 보인다. 반면 내가 원하는 것은 이와 비슷한 것입니다.

Date:06/01/2009 03:40 PM 

Name:XYZ ABC 

Address:ZZZ St. 

다른 페이지에서 비슷한 div를 사용하고 있으며 올바르게 표시되어 있습니다. 유일한 차이점은 cfloop 태그 안에 div 태그를 사용하고 있다는 것입니다.

어디에서 잘못 될지 알려주세요.

환호

Answer 1

H4는 후 암시 개행뿐만 아니라 P를 갖는다. CSS 스타일의 디스플레이 인 h4의 인라인 테이블을 사용하거나 스팬을 사용하고 원하는 h4 스타일처럼 보이게하는 클래스를 적용 할 수 있습니다.

Answer 2

현재 태그 구조를 유지하려는 경우 CSS에 P 태그를 플로팅 할 수 있습니다. 뭔가 (테스트되지 않음) :

.subBlock .item p {float : left; }

개인적으로 나는이에 태그를 재구성 것 :

<div class="subBlock"> 
    <div class="item"><p><strong>Date: </strong>#qry1.date#</p></div> 
    ... 
    ... 
</div> 

또는

<div class="subBlock"> 
    <div class="item"><p><span class="title">Date: </span>#qry1.date#</p></div> 
    ... 
    ... 
</div> 

다음 어떤 다른 또한 스팬 .title 클래스

Answer 3

에 대한 스타일을 적용 해답은 기본 블록 수준 스타일링을 사용하는 h4 및 p에 대해 언급 한 것으로 표제는 일반적으로 특정 섹션의 정보를 표시하는 것이 아니라 문서 섹션을위한 것입니다. ,

또는 (아마 미세 조정이 필요)

dl.party_details dt 
{ 
    float:left; 
    clear:left; 
    font-weight: bold; 
} 

dl.party_details dd 
{ 
    float:left; 
    clear:none; 
} 

님의

<cfloop query="qry1"> 
    <dl class="party_details"> 
     <dt>Date:</dt><dd>#qry1.date#</dd> 
     <dt>Name:</dt><dd>#qry1.name#</dd> 
     <dt>Address:</dt><dd>#qry1.address#</dd> 
    </dl> 
</cfloop> 

그리고 일부 CSS 유사한

은 (틀림없이) 더 의미 론적으로 올바른 정의 목록을 사용하는 것을 고려 span class="title"이있는 일반 ul/li가 선호 될 수 있습니다.

Answer 4

은 div, p 및 h4 태그를 사용하여 레이아웃과 모양을 훨씬 쉽게 제어 할 수있는 표를 사용합니다. div를 사용하면 특히 때로는 이상한 일을 할 수 있습니다.

<table> 
<cfloop query="qry1"> 
<tr> 
    <td class="item">Date: #qry1.date#</td> 
</tr> 
<tr> 
    <td class="item">Name: #qry1.name#</td> 
</tr> 
<tr> 
    <td class="item">Address #qry1.address#</td> 
</tr> 
</cfloop> 
</table>