イメージの7x3グリッドを作成する

Question

イメージのグリッドを7つ幅と3つの深さにしようとしています。画像はすべて3行に完全に収まる必要があります。私はそのように表示させるためにCSSを動かすことはできません。私は彼らが本質的にはinline-blockであるため、彼らは自動的に横に並べると思ったが、ページの中央に長い行を形成している（画像参照）。私は以下のHTMLを追加しました。私がfloat:left;またはdisplay:inline-block;の画像になっても効果はありません。下のコードを実行すると、expex/wantし​​たい方法で表示されていることがわかります。

ウェブサイトのURLはこちらです：

http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com

<div id="imagelist"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.26.33.png 
 
" alt="pies" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.26.08.png" alt="salmon" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.18.10.png 
 
" alt="eggs" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.23.54.png" alt="dough" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.19.34.png" alt="scallops" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.18.24.png" alt="shopfront" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.15.48.png" alt="egg" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.22.37.png" alt="fullenglish" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.25.09.png" alt="bread" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.21.29.png" alt="board" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.20.37.png" alt="bacon" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.25.34.png" alt="bread" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.17.35.png" alt="egg" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.18.47.png 
 
" alt="fullenglish" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.26.51.png" alt="shop" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.21.12.png" alt="risotto" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.24.13.png" alt="egg" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.24.53.png" alt="brownie" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.16.36.png" alt="board" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.16.16.png" alt="mushroom" height="182px" width="182px"> 
 
<img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.15.19.png" alt="sandwich" height="182px" width="182px"> 
 
</div> 
 
    
 

Answer 1

あなたはそこにいくつかの問題は、あなたのrenderdのHTML上にあるいくつかのbrタグが来ています、コンソールウィンドウでチェックできます。

あなたは解決これに次のCSSを使用することができます。

#imagelist br { 
    display: none; 
} 

Answer 2

私はあなたのHTMLコード内の各画像の下にBRタグを見ることができます。次のCSSコードを追加すると便利です。

#imagelist br { 
display:none; 
} 
#imagelist img { 
display:inline-block; 
}