CODEWITHSUNDEEP
css
hsym
hsym

Reputation: 5417

CSS: Standardize space between thumbnails in a row

I've got a 780px width container and I would like to fit 4 thumbnails per row (I have multiple rows).

How do I standardize the space between the thumbnails so that the first & fourth thumbnail in a row stick to the 'wall' of the container?

My code:

<ul class="thumbnails">
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
   ...and so on
</ul>

Upvotes: 0

Views: 1167

Answers (3)

Venkat
Venkat

Reputation: 314

this code may help you. Define your width in container related your thumbnail's width

    #container {
    width:200px;
    }
    #container ul li{
    display:inline-block;
    }

Check this http://jsfiddle.net/ychX4/

You can use this action by nth-child Css selectors. But Internet Explorer browser NOT support. Ref : http://css-tricks.com/how-nth-child-works/

Good Luck..)

Upvotes: 0

povilasp
povilasp

Reputation: 2396

For example if you need to have 20px spaces in between you can do this:

780-60=720 space available for blocks

720/4=180 your block width

.thumbnails .card{
width:180px;
margin-left:20px;
}
.thumbnails .card:first-child{
margin-left:0px;
}

Since you have edited your question, I would suggest having multiple ul for each row.

If you insist on having one:

http://reference.sitepoint.com/css/pseudoclass-nthchild this might be helpful:

.thumbnails .card:first-child, .thumbnails .card:nth-child(n5) {

Upvotes: 1

Gijs
Gijs

Reputation: 2082

use css3 to cut of the margin on every 4th element

li.card { 
  margin: 0 10px 10px 0;
}
li.card:nth-child(4n) {
  margin-right:0px;
}

see this jsfiddle

Upvotes: 1

Related Questions