ブラウザウィンドウでサイズを変更するdiv要素内のフローティングイメージの行を取得する方法

Question

ブラウザウィンドウのサイズを変更したときに、div内の4つのイメージのサイズを変更する方法を見つけることができませんでした。今、ブラウザのウィンドウが小さくなりすぎると、左の最後の画像が次の行に移動します。これは起こりたくありません。私は画像を1列にとどめたい。私はここや他の場所にある多くの提案を見て試してみましたが、私はそれを理解できません！元の画像が私の目的にとっては大きすぎるため、24％の画像すべての最大幅を知っていることが重要です。また、bodyの最大幅を1900px、最小幅を700pxに設定するために、ページ全体の周りにdivがあります。ここに関連するコードは次のとおりです。

HTML：

<br> 
<div id="contain"> 
<img src="webphoto6.jpg" alt="Mary" class="one"> 
<img src="webphoto3.jpg" alt="Mary" class="two"> 
<img src="webphoto42.jpg" alt="Mary" class="three"> 
<img src="WebPhoto.jpg" alt="Mary" class="four"> 
</div> 
<div id="clearfix"> 
<br> 

CSS：

#contain { max-width: 1900px; 
min-width: 780px; 
display: block; 
} 
img { width: auto; 
height: auto; 
width: auto\9; 
} 
.one {float: left; 
max-width: 24%; 
max-height: auto; 
padding-right:20px; 
padding-left: 0px; 
padding-top: 0px; 
padding-bottom: 0px; 
} 
.two {float: left; 
max-width: 24%; 
max-height: auto; 
padding-right: 20px; 
padding-left: 0px; 
padding-top: 0px; 
padding-bottom: 0px; 
} 
.three { float: left; 
max-width: 24%; 
max-height: auto; 
padding-right: 20px; 
padding-left: 0px; 
padding-top: 0px; 
padding-bottom: 0px; 
} 
.four {float: left; 
max-width: 24%; 
max-height: auto; 
padding: 0px; 
margin: 0px; 
} 
#clearfix {clear: both;} 

は私が助けに感謝します！

Answer 1

私は問題が20pxの固定された詰め物だと思う。ここでもパーセンテージを使用してみてください。たとえば、埋め込み：0.24％