HTML DIV格式問題

我有以下的DIV在我的HTML代碼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的省略號庫將...添加到文本中，但我不知道如何在我的情況下爲移動設備配置它。對於平板電腦，它看起來很不錯。任何建議或幫助非常感謝。

來源

2013-04-15 p0tta

既然你已經在使用表格，爲什麼不把每個預期的列放在<td>？

我已經刪除你的彩車，因爲我不知道你的#popupMap的尺寸我假定32×32像素（和紫色的背景：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-15 07:41:41 Sleavely

謝謝Sleavely。奇蹟般有效：） – p0tta

HTML DIV格式問題

回答

相關問題