CODEWITHSUNDEEP
phpcss
kavita
kavita

Reputation: 15

how to display six images in two rows

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

Upvotes: 1

Views: 1680

Answers (5)

Shomz
Shomz

Reputation: 37701

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.

Upvotes: 1

Jarosław Osm&#243;lski
Jarosław Osm&#243;lski

Reputation: 250

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>

Upvotes: 0

emmanuel
emmanuel

Reputation: 9615

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

Upvotes: 0

imnotanelephant
imnotanelephant

Reputation: 862

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>

Upvotes: 0

Anonymous
Anonymous

Reputation: 10216

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

Upvotes: 2

Related Questions