2 Divs在HTML5中使用JQuery Mobile重疊對方

Question

我正在使用Jquery Mobile和HTML5設計一個頁面，當我嘗試將2 div放入一個div中以滿足我的要求時，我正面臨問題。 它適用於桌面瀏覽器，但是當我在移動瀏覽器中看到結果互相重疊時。 我堅持2小時以來這個問題，需要我的問題:)

這裏是link的有點暗示OT的解決方案，看看有什麼我面臨:( 這裏是桌面瀏覽器的link其中每一件事情是罰款:)

這是我的HTML 5代碼。 here：

<div data-role="page" data-theme="a"> 
    <div data-role="header"> 
     <h1> 
      <img src="images/smashlogo.jpg" /> 
     </h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-dividertheme="b"> 
      <li> 
       <img src="images/H.jpg" /> 
       <div style="margin-top: 11px; width:90%"> 
        <a style=" font-size:10px; color: Black;">Great Deal- Collect 10 nights and get 1 free at Hotels.com</a><div style="float:right;"> 
        <img src="images/H1.jpg" /> 
       </div></div> 

       <%--<div style="margin-left:11px; margin-top:11px;">Great <img src="images/expedia.png" /></div>--%> 
      </li> 
      <li> 
       <img src="images/Expedia.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px; color: Black;">Earn Rewards with Expedia Hotels & Flights!</a></div> 
       <div style="float:right;"> 
        <img src="images/Expedia1.jpg" /></div> 
       <%--<select name="subject" id="subject" data-placeholder="true" data-native-menu="false"> 


        <option value="Art">Art</option> 
        <option value="Band">Band</option> 
        <option value="Choir">Choir</option> 
        <option value="Design">Design</option> 
        <option value="Drama">Drama</option> 
       </select>--%> 
      </li> 
      <li> 
       <img src="images/Vegas.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">myVEGAS Slots</a></div> 
       <div style="float:right;"> 
        <img src="images/Vegas1.jpg" /></div> 
      </li> 
      <li> 
       <img src="images/Castle.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Castle Clash by IGG</a></div> 
       <div style="float:right;"> 
        <img src="images/Castle1.jpg" /> 
       </div> 
      </li> 
      <li> 
       <img src="images/W.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Download the free Walgreens app</a></div> 
       <div style="float:right;"> 
        <img src="images/W1.jpg" /> 
       </div> 
      </li> 
      <li> 
       <img src="images/Expedia.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Earn Rewards with Expedia Hotels & Flights!</a></div> 
       <div style="float:right;"> 
        <img src="images/Expedia1.jpg" /></div> 
      </li> 
      <li> 
       <img src="images/Vegas.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">myVEGAS Slots</a></div> 
       <div style="float:right;"> 
        <img src="images/Vegas1.jpg" /></div> 
      </li> 
      <li> 
       <img src="images/Castle.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Castle Clash by IGG</a></div> 
       <div style="float:right;"> 
        <img src="images/Castle1.jpg" /> 
       </div> 
      </li> 
      <li> 
       <img src="images/W.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Download the free Walgreens app</a></div> 
       <div style="float:right;"> 
        <img src="images/W1.jpg" /> 
       </div> 
      </li> 
      <li> 
       <img src="images/Expedia.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Earn Rewards with Expedia Hotels & Flights!</a></div> 
       <div style="float:right;"> 
        <img src="images/Expedia1.jpg" /></div> 
      </li> 
      <li> 
       <img src="images/Vegas.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">myVEGAS Slots</a></div> 
       <div style="float:right;"> 
        <img src="images/Vegas1.jpg" /></div> 
      </li> 
      <li> 
       <img src="images/Castle.jpg" /> 
       <div style="margin-left: 3px; margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Castle Clash by IGG</a></div> 
       <div style="float:right;"> 
        <img src="images/Castle1.jpg" /> 
       </div> 
      </li> 
      <li> 
       <img src="images/W.jpg" /> 
       <div style="margin-top: 11px;"> 
        <a style="font-size:10px;color: Black;">Download the free Walgreens app</a></div> 
       <div style="float:right;"> 
        <img src="images/W1.jpg" /> 
       </div> 
      </li> 
      <%--<li><a href="option3.html">Option 3</a></li> 
      <li><a href="option4.html">Option 4</a></li>--%> 
     </ul> 
    </div> 
    <div data-role="footer"> 
     <h4> 
      &copy; 2012 Smashing Magazine</h4> 
    </div> 
</div> 

Answer 1

問題，只有當你的屏幕是非常窄它運作良好，在iPhone上發生。

我試過桌面網站的最小屏幕尺寸，您的網站正常工作的屏幕寬度是305px。 添加以下css來調整爲更小的屏幕代碼：

@media (max-width: 305px){ 
    //add style here 
} 

，或者你可以做一個最小寬度爲整個頁面，因爲沒有與大小許多屏幕：

html,body{ 
    min-width:305px; 
}