在 HTML5 中使用 JQuery Mobile 将 2 个 Div 相互重叠

Question

我正在使用 Jquery Mobile 和 HTML5 设计一个页面，当我尝试将 2 个 div 放在一个 div 中以满足我的要求时，我遇到了这个问题。 它适用于桌面浏览器，但是当我在移动浏览器中看到结果时，div 相互重叠。 我从过去 2 小时开始就被这个问题所困扰，需要一点提示来解决我的问题:)

这里是link，看看我面对的是什么:( 这是桌面浏览器的link，一切都很好:)

这是我的 HTML 5 代码。

 <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 上运行良好时才会出现此问题： here.

我尝试了桌面网站的最小屏幕尺寸，您的网站可以正常工作，屏幕宽度为 305 像素。 添加以下 css 以调整小屏幕的代码：

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

或者您可以为整个页面设置一个最小宽度，因为具有该尺寸的屏幕并不多：

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