手机html5 jquerymobile上的html div格式问题
我的HTML代码中有以下DIV手机html5 jquerymobile上的html div格式问题,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,我的HTML代码中有以下DIV <div id="page3" data-role="page"> <div data-role="content" style="height: 60px; top: 50%;" > <table border="0" width="100%"> <tr> <td> <img id="advImageMap" style="float
<div id="page3" data-role="page">
<div data-role="content" style="height: 60px; top: 50%;" >
<table border="0" width="100%">
<tr>
<td>
<img id="advImageMap" style="float:left; margin-top:0px;" width="40" height="40" >
<p id="mapText" style="display: inline-block; margin-left:10px; margin-top:5px;"></p>
<img id="popupMap" src="icons/ico_navi.png" class="ui-btn-right" style="float:right; margin-top:1px" />
</td>
</tr>
</table>
</div>
这段代码的目的是,在最左边放置一个图标,后跟一些文本和另一个图像。这些图像通常是缩略图或非常小的图像。我在这里看到的问题是,当这个页面显示在手机上时,有时当文本很长时,最后一个图像“popupMap”会一直显示到最后,最后一个图像会溢出到下一行,从而导致格式错误。我在某个地方读到可以使用jQuery省略号库添加。。。到文本,但我不知道如何配置它的移动设备在我的情况下。对于平板电脑来说,它看起来不错。非常感谢您的任何建议或帮助。既然您已经在使用表,为什么不将每个预期列放在
中呢
我已经删除了你的浮动,因为我不知道你的#popupMap的尺寸,我假设为32x32像素(紫色背景:D)
非常感谢您。工作就像一个符咒:)
<div id="page3" data-role="page">
<div data-role="content" style="height: 60px; top: 50%;">
<table border="0" width="100%"><tbody>
<tr>
<td style="width: 40px;">
<img id="advImageMap" style="margin-top:0px;" width="40" height="40">
</td>
<td>
<p id="mapText" style="margin-left:10px; margin-top:5px;">Lorem ipsum im a gummibear because gummibears are freaking awesome!</p>
</td>
<td style="width: 32px;">
<img id="popupMap" src="icons/ico_navi.png" class="ui-btn-right" style="margin-top:1px; width: 32px; height: 32px;background-color: purple;">
</td>
</tr>
</tbody></table>
</div>
</div>