html - 创建一个 7x3 的图像网格

Question

我正在尝试获取 7 宽 3 深的图像网格。图片应该完全适合 3 行。我无法计算出让它们以这种方式显示的 CSS。我认为它们会自动水平排列，因为它们本质上是 inline-block 但它们在页面中间形成一条长线(见图)。我在下面添加了我的 html。当我 float:left; 或 display:inline-block; 图像时，它没有任何效果。当您运行下面的代码时，您可以看到它以我期望/希望的方式显示。

网址在这里:

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

你渲染的 html 有一些问题，一些 br 标 checkout 现了，你可以在控制台窗口中检查。

您可以使用以下 css 来解决此问题:

#imagelist br {
    display: none;
}