6つの画像が中央に配置されていますが、3つ隣に配置されています

Question

レスポンシブウェブサイトを作成しようとしていますが、6行の画像を2行（1行に3枚）作成する必要があります。画面を小さくします。

私が働いているものの例は、上で見ることができます。http://www.mijncreaties.com/opstal/

あなたは画面を小さくするときは、画像がものを一つずつ下にスライドする方法を参照してください。しかし、画像がその隣にあるスライドの直前には、（すべてが左に揃えられているため）右に小さな隙間があります。

イメージの幅は330ピクセル、ページの最大幅は1000ピクセルです。ページを990ピクセル（980ピクセル）と小さくすると、右側の画像が残りの画像の下にスライドします。しかし、それは320pxの間のギャップを残す。画像を表示するにはちょっと小さめですが、気付くほど十分です。左側の2枚の画像を中央に揃えることができれば、隙間を少し埋めるでしょう。

全幅：

[image] [image] [image] 
[image] [image] [image] 

小規模

[image] [image]-small gap- 
[image] [image]-small gap- 
[image] [image]-small gap- 

最小

[image]-small gap- 
[image]-small gap- 
[image]-small gap- 
[image]-small gap- 
[image]-small gap- 
[image]-small gap- 

は、画像が常にページの中央に配置されるように、それを作るためにそれは可能ですが、それでもスライド画面が小さくなるとお互いの下に？ （センタリング）

| [image] [image] | 
| [image] [image] | 

それとも：：（それは少しストレッチする）

私はそれがこのように好きしたい

| [image] [image]  | 
| [image] [image]  | 

：それはのように見えることができる方法の

例

| [ image ] [ image ] | 
| [ image ] [ image ] | 

私はdisplay：block; margin-left：auto; margin-right：auto;を試しましたが、これはすべての画像をお互いの下に置きます。ページは最大幅にあります。

ウィンドウのサイズを変更するときに、イメージを縮小して特定のサイズに拡大する方法の実例を誰かが教えてくれれば、それも機能するかもしれません。

<a href="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" alt="feesten" width="330" height="220" class="alignnone size-full wp-image-931" srcset="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/feesten-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" alt="trouwen" width="330" height="220" class="alignnone size-full wp-image-933" srcset="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" alt="catering" width="330" height="220" class="alignnone size-full wp-image-929" srcset="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/catering-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" alt="condoleance" width="330" height="220" class="alignnone size-full wp-image-930" srcset="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" alt="zaalhuur" width="330" height="220" class="alignnone size-full wp-image-934" srcset="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" alt="fotos" width="330" height="220" class="alignnone size-full wp-image-932" srcset="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/fotos-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a> 

CSS：

img.size-full, img.size-large { 
    max-width: 100%; 
    height: auto; 
} 
img { 
    max-width: 100%; 
    height: auto; 
    vertical-align: top; 
    margin-bottom: 18px; 
} 

Answer 1

あなたはこのためにメディアクエリを使用する必要があります。私はdisplay:flexを使って以下の例を行った。あなたは、ブートストラップを追加する必要はありません - 私はこの

.wrapper { display:flex; flex-direction:row; flex-wrap:wrap; } 
 
.wrapper > a { display:block; width:33.333333%; text-align:center; } 
 
.wrapper img { display:block; margin:auto; } 
 

 

 
@media (max-width: 990px) { 
 
    .wrapper > a { width:50%; } 
 
} 
 

 

 
@media (max-width: 660px) { 
 
    .wrapper > a { width:100%; } 
 
}

<div class="wrapper"> 
 
<a href="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" class="borderit"> 
 
    <img src="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" alt="feesten" width="330" height="220" class="alignnone size-full wp-image-931" srcset="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/feesten-1-300x200.jpg 300w" 
 
    sizes="(max-width: 330px) 100vw, 330px"> 
 
</a> 
 
<a href="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" class="borderit"> 
 
    <img src="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" alt="trouwen" width="330" height="220" class="alignnone size-full wp-image-933" srcset="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1-300x200.jpg 300w" 
 
    sizes="(max-width: 330px) 100vw, 330px"> 
 
</a> 
 
<a href="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" class="borderit"> 
 
    <img src="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" alt="catering" width="330" height="220" class="alignnone size-full wp-image-929" srcset="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/catering-1-300x200.jpg 300w" 
 
    sizes="(max-width: 330px) 100vw, 330px"> 
 
</a> 
 
<a href="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" class="borderit"> 
 
    <img src="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" alt="condoleance" width="330" height="220" class="alignnone size-full wp-image-930" srcset="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1-300x200.jpg 300w" 
 
    sizes="(max-width: 330px) 100vw, 330px"> 
 
</a> 
 
<a href="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" class="borderit"> 
 
    <img src="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" alt="zaalhuur" width="330" height="220" class="alignnone size-full wp-image-934" srcset="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1-300x200.jpg 300w" 
 
    sizes="(max-width: 330px) 100vw, 330px"> 
 
</a> 
 
<a href="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" class="borderit"> 
 
    <img src="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" alt="fotos" width="330" height="220" class="alignnone size-full wp-image-932" srcset="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/fotos-1-300x200.jpg 300w" 
 
    sizes="(max-width: 330px) 100vw, 330px"> 
 
</a> 
 
    </div>

を達成するための完全なライブラリのための必要性を全く見ていないあなたがそれらをページにサイズを変更したい場合は - ちょうどのサイズ属性を削除します上記のスタイルでを.wrapper imgに追加してください）

Answer 2

（私はちょうど彼らがそれを行う方法がわからない...）

現在のコードをホームページ上に、下部ソーシャルメディアのブロックを参照してください。この目的のためにブートストラップフレームワークを使用することができます。そうしないと、レスポンシブなレイアウト用のメディアクエリが必要になります。ここには参照番号http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

ブートストラップを使ってみてください。ブートストラップは、レスポンシブなデザインを実現する究極のツールです。彼らのGridでは、かなり簡単に鶏を作ることができます。col-md-4クラスでdiv要素とのリンクで説明したように同様

何かをイメージを作成するようにしてください：

<div class="row"> <div class="col-md-4">[image]</div <div class="col-md-4">[image]</div> <div class="col-md-4">[image]</div> </div

ブートストラップを初めて使用する場合。 thisリンクを確認してください。ブートストラップのCDNヘッダの下に3つの行を追加するだけです。

Answer 4

ブートストラップグリッドシステムを使用してください。すべての画面サイズに合わせてデザインするのが簡単になります。 （小型（携帯）媒体（タブレット）および大型（モニタ））。コンテナを使用し、その後に行を作成し、列を使用してイメージを配置します。

<div class = 'container'> 
<div class = 'row'> 
    <div class='col-xx-xx'> 'Your images go here' </div> 
</div> 

第xxは画面サイズを示します。例：lg、md、sm、xs。 2番目の列は列番号を示します。 あなたのスタイリングに依存して、コンテナの液体かシンプルなコンテナを使用するかどうか。 参照のためにブートストラップのドキュメントを使用してください。それはシンプルで理解しやすいです：

http://getbootstrap.com/css/

http://getbootstrap.com/2.3.2/scaffolding.html