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