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

我尝试使用最小屏幕尺寸的桌面网站，您的网站工作正常，屏幕宽度为305px。添加以下css来调整较小屏幕的代码：

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

或者您可以为整个页面制作最小宽度，因为没有多少具有该尺寸的屏幕：

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

2 Divs使用HTML5中的JQuery Mobile互相重叠

1 个答案: