用css将图像放在网格中

Question

无法弄清楚如何实现该结果（图像中的单独徽标）。也许有人可以帮忙。

Answer 1

也许是这样的

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

.container {
    width:980px;
    float:left;
}
.logo-box {
    width:245px;
    float:left;
    height:150px;
}

您可以在img元素中放置任何HTML background标记或CSS .logo-box

Answer 2

为您做了快速演示。 CHECK THIS JSFIDDLE

在这里，我使用背景图像来创建边框。只是调整它!!!

干杯。

Answer 3

img{
   float:left;
}

这将起作用（你应该定义img的高度和宽度）

Answer 4

这似乎是一个很好的解决方案：http://unmatchedstyle.com/news/building-a-client-logo-grid-with-centered-elements.php - 所有图像水平和垂直居中 - 易于响应 - 易于自定义特定图像大小 - 似乎是非常跨浏览器兼容，即使是旧的糟糕的IE

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：

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