0

2つのリストを並べて表示する単純なHTMLページがあります。リストの各項目は、いくつかのデータを含むdiv要素（丸い角のボックス）です。STSから実行してブラウザで表示すると、リストが並べて表示されます。それをcouldfoundryにデプロイし、ブラウザーで表示すると、2番目のリストが1番目のリストの下に表示されます。これが私の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レンダリングは、サーバーサイドと直接関係する必要はありません。サーバー側から生成された結果は、ページの動的な部分が表示する内容に影響を与える可能性があります。したがって、たとえば、開発環境とステージングでページを表示すると、ステージにある可能性が最も高いレコードの数が原因で、UIに違いが見られます。

永続性をチェックして、CloudFoundryのサーバー側からローカルホストと同じ数のデータをクライアント側に送信できるかどうかを確認してください。

アプリケーションがPAAS環境にデプロイされているからといって、UIレンダリングが変更されないことを再度覚えておいてください。問題を引き起こしているのは、各環境にあるサーバー側のデータです。これは、ローカルホストでも発生する可能性があります。

于 2012-06-08T19:30:41.450 に答える