Question

我正在尝试创建一个响应式网站，我需要创建一个主页，其中包含2行中的6个图像（每行3个图像），当您将屏幕缩小时，这些图像会相互滑动。

我正在研究的一个例子可以在http://www.mijncreaties.com/opstal/

上看到

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

图像宽330像素，页面最大宽度为1000像素。当您将页面缩小到990像素（比如说980像素）时，右侧的图像会在其余部分下方滑动。但这留下了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]      |

我希望它像这样:(居中）

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

或许:(使其延伸一点）

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

我试过显示：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

您可以使用bootstrap框架来实现此目的，否则您需要媒体查询以进行响应式布局。这是参考http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

尝试使用Bootstrap。 Bootstrap是制作响应式设计的终极工具。使用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

如果您是Bootstrap的新手。查看this链接即可开始使用。您所要做的就是在Bootstrap CDN标题下添加3行，然后您就可以了

Answer 3

使用Bootstrap网格系统。它将使您更容易设计每个屏幕尺寸。（小（移动）媒体（平板电脑）和大（监视器））。使用容器，然后在其中和之后创建创建行，使用列将图像放入其中。

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

第一个xx表示屏幕尺寸。例如：lg，md，sm，xs。第二个表示列号。现在，无论您使用容器液体还是简单容器，这取决于您的造型。使用Bootstrap文档作为参考。它简单易懂：

http://getbootstrap.com/css/

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

Answer 4

您需要使用媒体查询。我在下面使用display:flex做了一个例子。你不应该需要添加bootstrap - 我认为不需要一个完整的库来实现这个

＆＃13;

.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%; }
}

＆＃13;

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

＆＃13;

如果您希望它们随页面调整大小 - 只需从实际图像中删除尺寸属性，并将宽度更改为百分比（例如，在上述样式中将width:100%;添加到.wrapper img < / p>

6个图像居中，但3个彼此相邻

4 个答案: