2

画像付きのニュース項目を表示するために以下を行っています。320 幅のデバイスでは問題なく動作しますが、240 デバイスでは画像を右に浮かせているので何ができるでしょうか。また、(テーブルの代わりに) div で % を使用するのが賢明です。

<div style="padding:10px;height: 100px;border-bottom: red 1px dashed">
  <div style="width: 56%; float: left; padding-right: 10px;">
     <span style="font-size: 14px; display: block; color: #cccccc">
        Pune, the team to beat
      </span> 
      <span style="font-size: 16px"> 
         Ruthless Gayle
      </span>
  </div>
  <div style="width: 40%; float: right">
    <img src="../images/src.jpg" width="120px" height="80px" />
  </div>
</div>

これをより良く行う方法を教えてください。幅の狭いデバイスのフォントを減らす必要がありますか。そして、画像サイズについても。

4

5 に答える 5

0

% でパディングを試してください:

例えば

<div style="width: 56%; float: left; padding-right: 2%;">
于 2013-05-10T07:11:15.277 に答える
0

モバイル/スマートフォン向けのデザインに関しては、サイズ、マージン、パディングの設定に % または em を使用するのが賢明です。

<div style="padding:5%;height: 40%;border-bottom: red 1px dashed">
  <div style="width: 56%; float: left; padding-right: 5%;">
    <span style="font-size: 2em; display: block; color: #cccccc">
      Pune, the team to beat
    </span> 
    <span style="font-size: 2em"> 
      Ruthless Gayle
    </span>
</div>
<div style="width: 40%; float: right">
  <img src="../images/src.jpg" width="100%" height="100%" />
</div>

もちろん、挿入した値は一時的なものです。正しい結果が得られるまで、テストとテストを繰り返すだけです。境界線を px のままにしましたが、それも変更できます。ただ、これは国境なので大したことはないと思います。

于 2013-05-10T07:35:58.127 に答える