使用 css 将图像放入网格中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12578502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put images in grid with css
提问by LifeIsShort
can't figure out how to achieve that result (separate logos like in image). Maybe someone can help.
无法弄清楚如何实现该结果（图像中的单独徽标）。也许有人可以帮忙。
采纳答案by Libin
Just made a quick demo for you. CHECK THIS JSFIDDLE
刚刚为您做了一个快速演示。检查这个 JSFIDDLE
Here I used background images for creating borders. Just Tweak it!!!
在这里，我使用背景图像来创建边框。只是调整一下！！！
Cheers.
干杯。
回答by Matt J
Maybe something like this
也许像这样
HTML
HTML
<div class="container">
<div class="logo-box" />
<div class="logo-box" />
<div class="logo-box" />
<div class="logo-box" />
<div class="logo-box" />
<div class="logo-box" />
<div class="logo-box" />
<div class="logo-box" />
</div>
CSS
CSS
.container {
width:980px;
float:left;
}
.logo-box {
width:245px;
float:left;
height:150px;
}
You can put whatever HTML imgtags or CSS backgroundwithin the .logo-boxelements
您可以在元素中放置任何 HTMLimg标签或 CSSbackground.logo-box
回答by Ketri
This seems to be a nice solution: http://unmatchedstyle.com/news/building-a-client-logo-grid-with-centered-elements.php- all images centered horizontally and vertically - easy to make responsive - easy to customize specific image sizes - seems to be very cross-browser compatible, even with old crappy IEs
这似乎是一个不错的解决方案：http: //unmatchedstyle.com/news/building-a-client-logo-grid-with-central-elements.php- 所有图像水平和垂直居中 - 易于响应 - 易于自定义特定的图像大小 - 似乎非常跨浏览器兼容，即使是旧的蹩脚 IE
HTML:
HTML：
<article class="clients">
<span></span><img src="images/img-logo2.png" alt="logo" />
</article>
<article class="clients">
<span></span><img src="images/img-logo3.png" alt="logo" />
</article>
CSS:
CSS：
article.clients {
float: left;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 203px;
height: 150px;
margin-right: 15px;
margin-bottom: 15px;
border: 1px solid #4d4d4d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
article.clients * {
vertical-align: middle;
}
article.clients span {
display: inline-block;
height: 100%;
width: 1px;
}
回答by Bernat
img{
float:left;
}
this will work (you should define the height and the width of the img's too)
这将起作用（您也应该定义 img 的高度和宽度）
