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省略記号ライブラリを使用して...をテキストに追加できることをどこかで読みましたが、私の場合、モバイルデバイス用に構成する方法がわかりません。タブレットとしては良さそうです。どんな提案や助けも大歓迎です。

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 に答える