how to display six images in two rows - php

Question

I use the following code:
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
I am unable to display three images in one rows and in second row next three images.
but i got the images in one rows. so there is any possibility to show images like as in one
row 1 2 3 and second row 4 5 6 images.
Thanks and regards

Answer 1

Add clear: left; to .category:nth-child(4)
JSFiddle - DEMO
.category:nth-child(4) {
clear: left;
}
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. - by Mozilla MDN

Answer 2

The easiest way would be to have one div for each row and each div having just those 3 images inside them.
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
<img src="img/driver_icon.jpg" />
<img src="img/user.png" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
</div>
See it here: http://jsfiddle.net/vj4kLdjh/1/
A slightly better approach would be to wrap each row into another div what would have display set to block (default) and the inside divs should either lose the float, or you need to add a clear:both element to the end of each row.
<div class="row>
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" />
</div>
<div align="center" class="category">
<img src="img/user.png" />
</div>
</div>
<div class="row>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
</div>
See it here: http://jsfiddle.net/vj4kLdjh/2/
I've marked the rows with a red border in both cases. I've also removed the inline styling in my answer, and I suggest you do the same in your code. Define classes for those elements and avoid inline styling whenever possible.

Answer 3

This will do exactly what you need - 2 rows containing 3 pictures each to 960px (Which you can of course modify). Don't forget that the child element (category) is width + padding(x2) for actual width - in this case, 320px each.
CSS:
div.contain {
width:960px;
}
# Each div takes 320px (times 3 is 960px)
div.category {
display: inline-block;
padding:5px;
width: 310px;
}
Then
<div class="contain">
<div class="category"># image 1</div>
<div class="category"># image 2</div>
<div class="category"># image 3</div>
</div>
<div class="contain">
<div class="category"># image 4</div>
<div class="category"># image 5</div>
<div class="category"># image 6</div>
</div>

Answer 4

You have to add a wrapper div to each row as:
.row_wrap {
width: 100%;
display: inline-block;
}
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="row_wrap">
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
</div>
<div class="row_wrap">
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
</div>
Hope this helps

Answer 5

div{
width: 400px;
}
div>img{
width: 100px;
float: left;
}
div>img:nth-child(3n+1){
clear: left;
}
<div>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
</div>