Question

我有一个简单的HTML页面，它显示了另外两个列表。列表中的每个项目都是包含一些数据的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
}

Answer 1

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

我会说检查您的持久性，看看您是否可以将具有相同数量的数据从Cloud Foundry的服务器端发送到客户端作为您的本地主机。

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

页面布局在我的localhost和cloudfoundry上的行为有所不同

1 个答案: