0

我的 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: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 ellipsis 库将 ... 添加到文本中，但我不知道如何为我的移动设备配置它。对于平板电脑来说，它看起来不错。非常感谢任何建议或帮助。

4

1 回答 1

1

既然您已经在使用表格，为什么不将每个预期的列放在一个<td>?

我已经删除了你的浮动，因为我不知道你的#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>
于 2013-04-15T07:41:41.320 回答