イメージ・オーバーフロー

Question

私は、次のようなHTMLがあります。

<div id="thumbs"> 
    ...8 image tags width and height of images 100 x 100px 
</div> 

関連のCSSは次のとおりです。

#thumbs 
    { 
     overflow:hidden;  
     float:left; 
     position:relative; 
     background-color:white; 
     height:100px; 
     width:100%; 
    } 

#thumbs img 
    {  
     padding:5px;  
    } 

私は-800×600、最後の設定最低にまで私の解像度を回したときにimage -img8は次の行にジャンプします。すべての画像を1行に表示したいと思います。これは可能ですか？

Answer 1

を使用すると、コンテナに10pxのパディング（5pxの左+ 5pxの右）それぞれに8×100pxに広い画像から得

#thumbs {min-width: 880px;} 

• 幅が最小幅を設定しようとしています。

Answer 2

それぞれ100ピクセル幅の画像が8枚あります。ウィンドウの幅は800ピクセルです。また、各画像に5pxのパディングがあり、全体の構造が880pxになります。各画像のサイズを90pxに減らしてください。スクロールが20〜30ピクセルもある場合は、スクロールバーを考慮してください。

Answer 3

responsive web design techniquesをご覧ください。

あなたは持っている問題は、あなたが800ピクセルのスペースに880pxを置くしようとしているで、これは、追加の80

与えるdiv要素を持っている各画像のための10pxののパディング画像に対して800ピクセルです私が使用する基本的なソリューションは、この言葉は、ウィンドウの幅が810pxの下であれば、その後の要素にこのスタイルを適用で何

@media screen and (max-width: 810px) { 
    #thumbs img { 
    padding: 3; 
    height:80px; 
    width:80px 
    } 
} 

のようなメディアクエリーに置くことです。なぜ810pxですか？基本的に安全であること。

イメージのサイズとパディングを減らす必要があるデザインの一貫性を保つには、実際に画面上でどのように見えるかによって、これらの変数を使用する必要があります。

私はこれがあなたに役立つことを願っています。