0

我有一个简单的 HTML 页面，其中一个显示 2 个列表。列表中的每个项目都是一个 div 元素（圆角框），其中包含一些数据。现在当我从我的 STS 运行它并在我的浏览器中查看它时：列表显示在另一个旁边。当我将它部署到 canfoundry 并使用我的浏览器查看它时，第二个列表显示在第一个列表下方。这是我的 HTML（我对缺少的缩进表示歉意）：

<section title="item List">
    <div class="inner"><h4>ITEMS</h4></div>
    <div class="inner"><h4>OTHERS</h4></div>
    <div style="clear: both"></div>

     <!-- item only list -->
    <div class="container">
    <ul class="plainList">
      <c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status">
        <li><div class="inner">
          <img src="resources/images/${item.id}.png">
          <ul class="plainList">
            <li><h4>${item.title} &trade;</h4></li>
             <li><h5>${item.description}</h5></li>
           </ul>
           <input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
          <div style="clear: both"></div>
          </div>
          </li>
        </c:forEach>
     </ul>
    </div>

    <!-- Others only list -->
    <div class="container">
      <ul class="plainList">
     <c:forEach items="${itemsFrom.othersOnly}" var="item" varStatus="status">
       <li><div class="inner">
         <img src="resources/images/${item.id}.png"/>
         <ul class="plainList">
            <li><h4>${item.title} &trade;</h4></li>
            <li><h5>${item.description}</h5></li>
          </ul>
          <input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
        <div style="clear: both"></div>
       </div>
       </li>
     </c:forEach>
     </ul>
    </div>
  </section>


这是CSS：

body {
    font-size:100%;
    font-family: Comic Sans MS, Georgia, ariel;
}

div.inner  { margin: 0; padding: 10px; border:0; zoom:1; background: #dcdcdc}
div.outer { float: left; margin: 5px; background: #c10506; padding: 8px, width: 26em}


.container {
    margin: 0px;
    padding: 0px;
    float: left
}

ul.plainList {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    float: left
}
4

1 回答 1

1

HTML 渲染与服务器端没有直接关系。服务器端生成的结果可能会影响页面的动态部分必须显示的内容。因此，例如，如果您在 dev env 与 staging 中查看您的页面，您会看到，由于记录数量最有可能在 stage 中，您的 UI 有所不同。

我想说检查您的持久性，看看您是否可以从 Cloud Foundry 的服务器端向您的客户端发送与您的本地主机相同数量的数据。

再次记住 UI 渲染不会因为您的应用程序部署到 PAAS 环境而改变。这是您在每个环境中拥有的服务器端数据导致您的问题。这也可以简单地发生在您的本地主机上。

于 2012-06-08T19:30:41.450 回答