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タグまたはCSSを配置できますbackground.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 - すべての画像は水平方向と垂直方向の中央に配置されています - レスポンシブにするのは簡単です - 簡単に特定の画像サイズをカスタマイズする

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