CODEWITHSUNDEEP
csslistposition
user961627
user961627

Reputation: 12747

css arrangement of differently sized list items in a neat row

I have a bunch of images which are loaded as a list, some have vertical orientation, some have horizontal, but I want them to appear neatly and left-aligned. This is my CSS code:

#designgallery
{
    list-style-type:none;
    margin-top:15px;
    float:left;
}

#designgallery li
{
    display:block;
    margin:5px;
    background-color:#eee;
    padding:5px;
    float:left; 
}
.design-display 
{
    border:1px solid gray;
}
.Horizontal
{
    width:210px;
    height:122px;
}
.Vertical
{
    height:180px;
    width:122px;
}

This is my HTML:

<ul id="designgallery">
<li> <img class="design-display Horizontal" src="1.jpg" /><!--some other stuff--> </li>
... many list items, some horizontal, some vertical
</ul>

But this is what I get:

The vertical image on the right-bottom corner should be starting the new line of images on the left side, how do I do that?

The vertical image on the right-bottom corner should be starting the new line of images on the left side, how do I do that?

Upvotes: 0

Views: 329

Answers (1)

brains911
brains911

Reputation: 1310

Javascript is the solution if you desire the 'masonry' effect.

If javascript isn't an option and if you do indeed know the max width/height of your vertical and horizontal images you can force alignment by applying those max dimensions on your li elements like in this fiddle.

The drawback is you create extra space around the images which may be undesirable depending on your design requirements, but you may be able to make it at least look 'nice' with css.

Upvotes: 1

Related Questions