无法格式化图库的图像网格

Question

我正在一个页面上展示图片库。出于某种原因，第二排图像持有者不会确认标签。然后，最终结果将是240px X 240px上的图像网格，每边的边距为20px，除了左列左侧和右侧右侧。

应该是这样的：

| IMG | | IMG | | IMG | | IMG |

| IMG | | IMG | | IMG | | IMG |

| IMG | | IMG | | IMG | | IMG |

HTML：              

    </div>
    <div class="break">

    </div>
    <div class="img">

    </div>
    <div class="break">

    </div>      
    <div class="img">

    </div>
    <div class="break">

    </div>      
    <div class="img">

</div>
<br>
<div class="gallery">
    <div class="img">

    </div>
    <div class="break">

    </div>
    <div class="img">

    </div>
    <div class="break">

    </div>      
    <div class="img">

    </div>
    <div class="break">

    </div>      
    <div class="img">

    </div>
</div>

继承人的CSS：

.gallery {
width: 1020px;
background: rgba(255, 255, 255, 0);
margin: 0 auto;
}

.gallery .img {
width: 240px;
height: 240px;
background: #FFF;
margin: 0 auto;
-moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
float: left;
}

.gallery .break {
height: 240px;
width: 20px;
float: left;
}

.break_long {
height: 20px;
width: 1020px;
background-color: solid black;
}

Answer 1

使用以下代码。我希望这对你有用：

HTML

        <div class="gallery">
            <div class="img">

            </div>
            <div class="img">

            </div>
            <div class="img">

            </div>
            <div class="img">

            </div> 
        </div>
        <div class="gallery">
            <div class="img">

            </div>
            <div class="img">

            </div>
            <div class="img">

            </div>
            <div class="img">

            </div> 
        </div>  
        <div class="gallery">
            <div class="img">

            </div>
            <div class="img">

            </div>
            <div class="img">

            </div>
            <div class="img">

            </div> 
        </div>



    CSS



    .gallery{
    width:auto;
    display:inline-table;
    float:left;background:#000;
    }

    .gallery:first-child > div.img{
    margin-top:20px;
    }

    .gallery > div.img{
    width:240px;
    height:240px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:20px;
    background:#fff;
    float:left;
    }
    .gallery > div.img > img{
    width:100%;
    height:auto;
    }
    .gallery > div.img:first-child {
    margin-left:20px;
    }
    .gallery > div.img:last-child {
    margin-right:20px;
    }

Out put：