我有X个图像（所有相同的高度和宽度），我想在网页上显示它们 . 但我想让页面在调整浏览器大小时自动显示一行中的最大图像数量（不调整图像大小），并将图像显示为固定距离 .
此外，图像应在页面中央组合在一起，并一个接一个地显示 .
例如当浏览器窗口仅足够宽以在一行上显示3个图像时，它们应显示如下 .
每行3个图像以固定的距离分组在一起，在页面的中心，一个接一个 .
如果浏览器变得更宽，那么可以在一行上显示4个图像，它们应该像这样显示 .
每行4个图像（不调整图像大小），在页面中心一个接一个地分开固定距离 .
到目前为止，我已经编写了以下代码：
HTML
<div class="outer-div">
<div class="inner-div">
<div class="image-div"><img src="images/1.png"></div>
<div class="image-div"><img src="images/2.png"></div>
<div class="image-div"><img src="images/3.png"></div>
<div class="image-div"><img src="images/4.png"></div>
<div class="image-div"><img src="images/5.png"></div>
</div>
</div>
CSS
img {
height: 200px;
width: 200px;
padding: 10px;
}
.image-div {
display: inline;
}
.outer-div {
text-align: center;
width: 100%;
}
.inner-div {
text-align: left;
display: inline;
}
因此，图像以div（inner-div）内部的10px填充内联显示，然后在outer-div内居中 . 并且图像在内部div内部的文本对齐 .
但问题是它们显示如下：
如下所示，当浏览器变宽时
有人可以告诉我如何显示像第一组图像的图像？
即，每行的最大图像数（不调整图像大小），一个接一个地在页面的中心组合在一起，固定距离（包裹） .
10 回答
据我所知，用简单的CSS实现布局并不容易 . 以下方法使用媒体查询为不同的视口大小设置内部div的宽度 .
如果您有相当多的项目，请考虑使用Javascript，CSS预处理器也可能有用 .
请参阅内联代码段和注释，同时查看 jsfiddle example 以便于测试 .
这是一个非常好的问题 . 起初看起来很简单，但最佳结果很难实现 .
我真的不相信有一种方法可以在不使用媒体查询的情况下实现预期的行为 .
但是，利用一些媒体查询并确切地知道 width of the images 和最大可能 number of images per row 我们可以使用基于
display: inline-*的属性来解决问题 .display: inline-block
应该支持旧的浏览器，因为它自CSS2以来 . 我们必须使用一个小技巧来防止在项目之间呈现不需要的空白区域 .
诀窍是设置CSS属性
font-size: 0.display: inline-flex
这个解决方案使用了CSS flexbox，它是现代浏览器的一个很好的选择 .
display: inline-table
自CSS2以来也支持并且不需要任何技巧才能使其工作 .
display: inline
最终结果不是作者所期望的结果，因为第二行中的元素将居中对齐而不是左对齐 . 关于这个解决方案的好处是它可以在没有图像宽度和媒体查询的先前知识的情况下工作 .
这是一个可能适合您和其他人的通用解决方案 .
HTML
CSS
DEMO
Re: Flexbox ：虽然flexbox是一个很棒的工具，但它不是解决这一特定问题的最佳解决方案 . 我在这里解释一下我的推理：How to center a flex container but left-align flex items
我认为，考虑到CSS的多种可能性，这是一个相当优雅且多用途的解决方案，只需要很少的代码 .
下面的代码段包含所有必需的CSS，并附带广泛的评论 . 最好在'full page'模式下运行 . 最初调整浏览器大小，直到' rcb 1 '有 6 columns . 然后开始滚动并调整大小以查看各种效果 .
乍一看你可能不知道，但这个简单的代码有很大的潜力，如画廊，幻灯片，滚动条（垂直和水平）等 .
虽然可能不是这个问题的100％解决方案，但我对结果非常满意！
请好好看看，并给予您赞赏的评论！
-Addendum- ：此解决方案已经过测试，可以使用：
Android 5：默认浏览器
Windows7-x32：Google Chrome（46），Firefox（41），Firefox DE（43）和IE11
UPDATE 11/20/15 一些代码修改，请参阅注释 .
你不需要在这里做任何复杂的工作，只需要！重要
“！important”将在这种情况下起作用
我没有时间改进以下内容，但希望能以某种方式帮助你！很多案例都包括在内！如果您正在寻找PureCSS解决方案，请使用Flexbox！
我想我有一个解决方案 .
将
.inner视为内联块，您可以使用text-align: center将项目组保持在100％宽度div的中间 . 这很好地缩小了 .Get'fiddle wit it：http://jsfiddle.net/sLz2ok92/2/
您只需将
float: left;添加到.image-div类示例：https://jsfiddle.net/czdwkxq7/
要实现此目的，您需要使用内联块 . 这是一个很好的指南：http://learnlayout.com/inline-block.html
我做了一个有点像你的项目的codepen：http://codepen.io/noxlux/pen/rOYYdW