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>

页面上显示的内容如下所示 -

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的inline-table，或者使用span并应用一个使它看起来像你想要的h4样式的类。

Answer 2

除了其他答案所说的h4和p具有默认的块级样式之外，标题通常用于文档部分，而不是用于标记特定信息。

考虑使用定义列表，（可以说）在语义上更正确：

<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类似于：

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

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

（可能需要调整）

或者，可能优先使用span class="title"的常规ul / li。

Answer 3

如果要保留当前标记结构，可以将P标记浮动到CSS中。像（未经测试）的东西：

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

然后为span .title类应用样式

Answer 4

使用表格，更容易控制使用div，p和h4标签的布局和外观。当我使用div时，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>

cfloop标记内的div标签会引入不需要的换行符

4 个答案: