JQuery Mobile App - アプリケーション全体を分割するコードセクション

Question

何らかの理由で、このコードセクションはアプリ全体を分割します。アプリケーションは、リストビューを使用してページ間を行き来する必要がありますが、このセクションではそれを壊しています。このコードセクションを削除すると、アプリは意図したとおりに流れます。コードでエラーが見つかりません。私が逃したかもしれないものは何ですか？私は、これは何を意味しているかどうかを知るが、私は崇高なテキストを使用していますいけないと私はここのコードに示す非常に最後のdivを選択した場合、それは私が表示されます*

<div data-role="page" id="addbasic"> 

    <div data-theme="a" data-role="header"> 
    <h3> 
     Addition Basics 
    </h3> 
    </div> 

    <div data-role="content"> 
    <!--<div class="example-wrapper" data-iscroll>--> 

     <div align="center"> 
     <table border="0" cellpadding="5" cellspacing="0" id="addtable1"> 
      <tbody> 

      <tr> 
       <p align="center"><b><font color="black" face="Arial" size="4">Step 1:</font></b> 
       </p> 
       <td align="center"><b><font color="#FF0000" face="Arial" size="3">Set A</font></b> 
       </td> 
       <td align="center"><b><font color="#0000FF" face="Arial" size="3">Set B</font></b> 
       </td> 
      </tr> 

      <tr> 
       <td align="center"><b><font face="Arial" size="3">How many<br /> 
       triangles are in <font color="#FF0000">Set A?</font> 
       <br /> 
       (There are <font color="#FF0000">2</font>!)</font></b> 
       </td> 
       <td align="center"><b><font face="Arial" size="3">How many<br /> 
       triangles are in <font color="#0000FF">Set B?</font><br /> 
       (There are <font color="#0000FF">3</font>!)</font></b> 
       </td> 
      </tr> 

      <tr> 
       <td align="center"><b><font face="Arial"> 
       <img alt="Set A: 2 triangles" src="img/add/add basic/seta.png" style="border-width: 0px; border-style: solid; width: 210px; height: 125px;" /></font></b> 
       </td> 

       <td align="center"><b><font face="Arial"> 
       <img alt="Set B: 3 triangles" src="img/add/add basic/setb.png" style="border-width: 0px; border-style: solid; width: 232px; height: 129px;" /></font></b> 
       </td> 
      </tr> 

      </tbody> 
     </table> 
     </div> 

     <br /> 
     <hr > 

     <div align="center"> 
     <table border="0" cellpadding="5" cellspacing="0" id="addtable2"> 
      <tbody> 

      <tr> 
       <p align="center"><b><font color="black" face="Arial" size="4">Step 2:</font></b> 
       </p> 

       <p align="center"><b><font color="black" face="Arial" size="4">Now combine them into one set!</font></b> 
       </p> 

       <img alt="Combined sets" src="img/add/add basic/combined.png" /> 

      </tr> 

      </tbody> 
     </table> 
     </div> 

     <br /> 
     <hr > 

     <div align="center"> 
     <table border="0" cellpadding="5" cellspacing="0" id="addtable3"> 
      <tbody> 

      <tr> 
       <p align="center"><b><font color="black" face="Arial" size="4">Step 3:</font></b> 
       </p> 

       <p align="center"><b><font color="black" face="Arial" size="4">Count how many triangles are in the new set</font></b> 
       </p> 

       <img alt="Combined sets" src="img/add/add basic/combined.png" /> 

       <p align="center"><b><font color="black" face="Arial" size="4"> 
       There are <font color="purple">5</font> total! 
       </p> 

       <img alt="Combined sets" src="img/add/add basic/equation.png" /> 

      </tr> 

      </tbody> 
     </table> 
     </div> 

     <a href="#addition">Go to addition page</a> 

    </div> 

    <div data-theme="a" data-role="footer"> 
    <h1>Copyright 2015</h1> 
    </div> 

</div> 

編集：おかげ

ここでは、コードです私はこのコードブロックのためのapproiate決算のdivを選択しても、このdiv要素に行くことができるので、それがこれを行う理由

<div align="center"> 

がわからない：それは示して最後のdivを接続します。何もないかもしれませんが、最後のdivを選択すると、

<div data-role="page" id="addbasic"> 

が開きます。コードのこのセクションで

Answer 1

：

<p align="center"><b><font color="black" face="Arial" size="4"> 
     There are <font color="purple">5</font> total! 
</p> 

閉じられ、それがエラーを起こしていなかった余分なフォントタグがあります。