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

您可以在元素中放置任何 HTMLimg标签或 CSSbackground.logo-box

Answer 2

刚刚为您做了一个快速演示。检查这个 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;
}