我正在使用 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>
© 2012 Smashing Magazine</h4>
</div>
</div>
最佳答案
只有当你的屏幕很窄时才会出现这个问题,它在 iphone 上运行良好: here .
我尝试了桌面网站,您的网站可以正常工作的最小屏幕尺寸是 305 像素屏幕宽度。 添加以下 css 以针对较小的屏幕调整代码:
@media (max-width: 305px){
//add style here
}
或者您可以为整个页面设置一个最小宽度,因为没有多少屏幕具有该尺寸:
html,body{
min-width:305px;
}
关于jquery - 2个Divs在HTML5中使用JQuery Mobile相互重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21225138/