可変サイズの2つのimgが行内にあり、その中央が画面中央に表示され、大きすぎると水平スクロールする

Question

基本的に2つの画像を隣り合わせに表示したい場合は、画像サイズに依存しない）。私はそれを固定的な位置付けで行うことができましたが、この場合、画像が画面のそれぞれの側で大きすぎる場合はスクロールしません。

HTML：

<div class="left"> 
    <img src="xyz.jpg"/> 
</div> 
<div class="right"> 
    <img src="abc.jpg"/> 
</div> 

CSS：

.left { 
    position: fixed; 
    right: calc(50% + 10px); 
    width: auto; 
} 
.right { 
    position: fixed; 
    left: calc(50% + 10px); 
    width: auto; 
} 

FIDDLE

私はなく、横スクロールで、同じ動作を得ることができますどのように任意のアイデア？私はそれが位置とすることができないと信じています：固定。別の方法がありますか？ ありがとう

Answer 1

floatと半分の幅（50％）を使用できます。本文のオーバーフローのデフォルト値は自動（スクロール）なので、スクロールバーは自動的に表示されます。

これを試して、あなたが望むものかどうかを確認してください。

<div class="left"> 
    <img src="http://i.imgur.com/afd65O1.png" /> 
</div> 
<div class="right"> 
    <img src="http://i.imgur.com/WTuWgFvl.jpg" /> 
</div> 

とCSSご提案のための

.left, 
.right { 
    float: left; 
    width: 50%; 
} 

Fiddle

Answer 2

.left { 
    width: 50%; 
    float: left; 
    overflow-x: scroll; 
} 
.right { 
    width: 50%; 
    float: right; 
    overflow-x: scroll; 
}