html - 图像水平分隔线

Question

我怎样才能操纵这个类，让它只在一行上拍摄 5 张图像，在下面拍摄 5 张图像？因此有 2 条平行线，每条线上有五个图像。每个图像与左/右和下/上图像分开。

HTML:

<div class="FireArmsContainer">
 <img id="image1" src="http://postimg.org/image/9km8errvx/"/>

<img id="image2" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image3" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image4" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image5" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image6" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image7" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image8" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image9" src="http://postimg.org/image/9km8errvx/"/>
       </div>
<img id="image10" src="http://postimg.org/image/9km8errvx/"/>
       </div>

</div>

CSS:

img {
    max-width: 100%;
    max-height: 100%;
}
#image1 {
    height: 75px;
    width: 75px;

}
#image2 {
    height: 75px;
    width: 75px;
}
#image3 {
    height: 75px;
    width: 75px;
}
#image4 {
    height: 75px;
    width: 75px;
}
#image5 {
    height: 75px;
    width: 75px;
}
#image6 {
    height: 75px;
    width: 75px;
}
#image7 {
    height: 75px;
    width: 75px;
}
#image8 {
    height: 75px;
    width: 75px;
}
#image9 {
    height: 75px;
    width: 75px;
}
#image10 {
    height: 75px;
    width: 75px;
}

Answer 1

只需将空间除以 5。

.FireArmsContainer img { 
    float: left;
    width: 19%;
    margin-right: 1%;
    height: 75px;
}

然后可选地，清除其 float 的 FireArmsContainer 容器，以便下一个 HTML 兄弟正确运行。

.FireArmsContainer:after {
    clear: both;
    content: "";
    display: table;
}