0

小さなモニターで画像が次の行に折り返されるという問題がありますが、同じ行にとどまり、スクロールバーにすべての画像または何かが表示されるようにする方法はありますか?

<body style="font-name:Arial,Helvetica;font-size:10pt">
   <h1>Order Confirmation</h1>  
     <img src="http://www.new-line.com/catalog/images/nlbanner1.png" /><img src="http://www.new-line.com/catalog/images/nlbanner2.png" />

http://www.new-line.com/catalog/images/nlbanner1.png http://www.new-line.com/catalog/images/nlbanner2.png

これを行っていますが、nlbanner 2 を同じ行の nlbanner1 の横に配置したいです。大きなモニターでは見栄えがしますが、小さなモニターやモバイルではこの問題が発生するようです. 助言がありますか？

4

1 に答える 1

3

div画像の周りにを追加します。

<div class="pic">
   <img src="http://www.new-line.com/catalog/images/nlbanner1.png" /><img src="http://www.new-line.com/catalog/images/nlbanner2.png" />
</div>

次に、CSS を使用します。

.pic {
  white-space: nowrap;  
}

Charles380 が述べたように、スクロール機能が必要な場合は、次を使用します。

.pic {
  white-space: nowrap;
  overflow: scroll;  
}

これにより、スクロールバーも表示されるため、目的の外観に合わない場合があることに注意してください。

jsfiddle

于 2013-08-07T18:46:14.103 に答える