Html 6个图像居中，但3个相邻

我正在尝试创建一个响应性强的网站，我需要创建一个2行6张图片（每行3张图片）的主页，当你缩小屏幕时，这些图片会在彼此下方滑动

我正在研究的一个例子可以在以下网站上看到：

当你缩小屏幕时，你会看到图像是如何一个接一个地滑到下面的。但就在图像滑到旁边的图像下方之前，右侧有一个小间隙（因为它们都与左侧对齐）

图像的宽度为330像素，页面的最大宽度为1000像素。当你把页面缩小到990px（比如980px）以下时，右边的图像会滑到其余部分的下面。但这留下了320像素之间的差距。只是为了让图像显示而变小，但足够大以引起注意。如果左边的两个图像可以在中心对齐，它会稍微填补空白

全宽：

[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]      |

我希望它像这样：（居中）

或者：（让它伸展一点）

我试过显示：块；左边距：自动；右边距：自动；，但这会将每个图像置于彼此下方，即使页面处于最大宽度

如果有人能给我一个在调整窗口大小时使图像缩小并增长到一定大小的方法的工作示例，那也可能有效。请查看主页下方的社交媒体块（我只是不知道他们是怎么做到的…）

当前代码：

<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>

---

为此，您可以使用引导框架，否则您需要媒体查询以获得响应性布局。这里是参考

您可以使用引导框架来实现此目的，否则您需要媒体查询以获得响应性布局。以下是参考资料

尝试使用引导。Bootstrap是制作响应性设计的终极工具。有了它们，你可以很容易地创造出公鸡。尝试创建带有div的链接中所述的带有

col-md-4

class的图像

比如：

[图像]尝试使用引导。Bootstrap是制作响应性设计的终极工具。有了它们，你可以很容易地创造出公鸡。尝试创建带有div的链接中所述的带有
col-md-4
class的图像

比如：


[图像]使用引导网格系统。它将使您更容易为每种屏幕尺寸进行设计。（小型（移动）中型（平板电脑）和大型（显示器））。使用容器，然后在其中创建行，然后使用列在其中放置图像

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


“你的图像在这里”


第一个xx表示屏幕大小。例如：lg、md、sm、xs。第二个表示列号。
现在，无论您使用容器流体还是简单容器，这取决于您的样式。
使用引导文档作为参考。它简单易懂：


使用引导网格系统。它将使您更容易为每种屏幕尺寸进行设计。（小型（移动）中型（平板电脑）和大型（显示器））。使用容器，然后在其中创建行，然后使用列在其中放置图像

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


“你的图像在这里”


第一个xx表示屏幕大小。例如：lg、md、sm、xs。第二个表示列号。
现在，无论您使用容器流体还是简单容器，这取决于您的样式。
使用引导文档作为参考。它简单易懂：


您需要为此使用媒体查询。我使用
display:flex
完成了下面的一个示例。您不需要添加引导-我认为不需要一个完整的库来实现这一点


.wrapper{display:flex；flex-direction:row；flex-wrap:wrap；}
.wrapper>a{显示：块；宽度：33.333333%；文本对齐：居中；}
.wrapper img{显示：块；边距：自动；}
@介质（最大宽度：990px）{
.wrapper>a{宽度：50%；}
}
@介质（最大宽度：660像素）{
.wrapper>a{宽度：100%；}
}
您需要为此使用媒体查询。我使用
display:flex
完成了下面的一个示例。您不需要添加引导-我认为不需要一个完整的库来实现这一点


.wrapper{display:flex；flex-direction:row；flex-wrap:wrap；}
.wrapper>a{显示：块；宽度：33.333333%；文本对齐：居中；}
.wrapper img{显示：块；边距：自动；}
@介质（最大宽度：990px）{
.wrapper>a{宽度：50%；}
}
@介质（最大宽度：660像素）{
.wrapper>a{宽度：100%；}
}

您可以在包含图像的div中设置
text align:center
。输入内容{text align:center}
当屏幕调整大小时，图像将保持相同的大小，还是将保持一定的宽度？此时它们保持相同的大小，但如果我知道如何在调整大小时控制它们的增长，这也可能奏效。我真的不知道怎么做。你可以在包含图像的div中设置
text align:center
。
。输入内容{text align:center}
当屏幕调整大小时，图像的大小是保持不变还是保持一定的百分比宽度？此时它们保持不变，但是，如果我知道如何在调整尺寸时控制它们的增长，那也可能奏效。我真的不知道该怎么做。谢谢，我会看看的，不管怎么说，这似乎是很好的学习方法。是的，完全是。它还创建一组类来创建错误或成功消息。完全值得学谢谢，我会查一查的，看来这是很值得学的东西。它还创建一组类来创建错误或成功消息。非常值得一学，这是完美的。就一个
img.size-full, img.size-large {
    max-width: 100%;
    height: auto;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 18px;
}

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