用css将图像放入网格中

Question

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

Answer 1

刚刚作出了一个快速演示给你。 CHECK THIS JSFIDDLE

这里我使用背景图像来创建边框。只需调整它！

干杯。

Answer 2

img{ 
    float:left; 
} 

这将工作（你应该定义高度和IMG的太宽）

Answer 3

也许这样的事情

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> 

CSS

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

你可以把任何的.logo-box元素中的HTML标记img或CSS background

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