3つのイメージが水平なレスポンスデザイン

Question

流体リサイズを使用して簡単なイメージグリッドを作成する方法についての説明が必要です。フロントページに3つの（約300ピクセルの）正方形の画像を配置して、幅を広げ、ウィンドウのサイズを変更したり表示したりするときに反応したいと思います。画面サイズが小さければ、3つの画像は水平のままですが、縮小します。電話で見ると、3つの画像は最初のものが上に、1つ目が中間に、もう1つが3番目に重ねて表示されます。

画像が表示されることがありますが、CSSに問題があります。

<div id="content" class="col-full"> 

<div id="grid"> 

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a> 
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a> 
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a> 

    </div> 

<style type="text/css"> 
#grid img { 
float: center; 
margin: 25px; 
} 
</style> 

このNOOBに関するアドバイスはありがたいです。 :-)

Answer 1

「text-align：center;」を試してください。 「display：inline-block;」と表示されます。画像に

する必要があります。

例：http://jsfiddle.net/SvR6Z/1/

EDIT：画面を縮小するために追加された方法。

では、次の操作を行うことができ、ウィンドウ幅にページその応答に画像の位置を変更するには：

1. は、相対的なサイズのタグを指定します。例えば、 "width：80％;"ページ幅は常に親コンテナの80％になります（親コンテナが本体の場合、ウィンドウ幅の80％になります）。デフォルトでは、ブロックレベル要素の幅は100％です。もしそれがいくつかの値より大きくならないようにするには、max-widthプロパティを指定してください。要素：「幅：100％、最大幅：906ピクセル」ウィンドウのサイズにかかわらず、常に960ピクセル以下の幅を持ちます。

2. oyuは、モバイルビューア（例：いくつかの要素があります）のグリッドと装飾をより細かく制御したい場合は、cssメディアクエリを使用できます（詳細はhttp://css-tricks.com/6731-css-media-queries/を参照してください）。ページにCSSをリンクしている場合たとえば、この方法は、それは、ウィンドウ幅が701px以上である場合にのみ作業し、少ないし、900pxされます。

   <link rel='stylesheet' media='screen 
        and (min-width: 701px) 
        and (max-width: 900px)' href='css/medium.css' />