2013-08-07 2 views
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.pnghttp://www.new-line.com/catalog/images/nlbanner2.png

그것은이 일을하지만, 나는 nlbanner 2가 같은 줄에 nlbanner1 옆되고 싶어요. 대형 모니터에서는 훌륭하게 보이지만 소형 모니터와 모바일에서는이 문제가있는 것 같습니다. 어떤 제안?

답변

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

+1

오버플로 : 스크롤을 추가 할 수도 있습니다. 그래서 그것은 http://jsfiddle.net/p4h2h/1/에서 볼 수있는 적당한 높이를 유지할 것입니다. – Charles380

+0

고마워요! 일한 것 같습니다. –

+0

@ Charles380 좋은 제안. 내 대답 –

관련 문제