CODEWITHSUNDEEP
htmlcss
mikeb
mikeb

Reputation: 727

Image horizontal divider

How can i manipulate this class so that it'll only take 5 images on a line and 5 on the below? Thus having 2 parallel lines with five images on each line. With each image separated from the left/right and bottom/up images.

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

Upvotes: 0

Views: 216

Answers (2)

dan richardson
dan richardson

Reputation: 3939

Just divide the space by 5.

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

and then optionally, clearing the FireArmsContainer container of it's floats so the next HTML sibling runs in properly.

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

Upvotes: 1

Som
Som

Reputation: 270

It seems that your HTML code is not valid. There are too many closing </div> tags which are not open.

If you use all the images inside only one <div class="FireArmsContainer"><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /></div> then you can write your css as,

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

If you want to add margin to the images, write it as, 

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

Upvotes: 0

Related Questions