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

然后可选地，清除它的FireArmsContainer容器浮动，以便下一个HTML兄弟正常运行。

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

Answer 2

您的HTML代码似乎无效。有太多关闭</div>标记未打开。

如果您只使用一个<div class="FireArmsContainer"><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /></div>内的所有图片，那么您可以将您的CSS编写为，

.FireArmsContainer img{
   width: 20%;
   float: left;
}

如果要为图像添加边距，请将其写为，

.FireArmsContainer img{
   width: 18%;
   float: left;
   margin: 1%;
}

图像水平分隔线

2 个答案: