How can i accomplish this? Prefer to use regular html and css

Question

Is there any way to accomplish this without the use of jquery?

The width of the images will vary from small, medium and big. The products will have a property with size.

I thought about using just float left, but that wont work since the big picture will force the 2 left bottom once, down to the next line.

If i have to use jquery, which plugin is the best?

EDIT: The order of the list varies, which means the size of the pictures will not be at the same posistion always. Float left, float right wont work then

Answer 1

May be you are looking for jQuery Masonry :

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Answer 2

制作将包含底部4辆汽车（小汽车）并向左浮动的盒子

Answer 3

Use this div strucure maybe? So red has full width and other are 50%

Answer 4

Try the following structure

    <div>
       <img src="smallimg1/>
       <img src="smallimg2/> 
       <img src="smallimg3/>
       <img src="smallimg4/> 

        </div>

        <div>

   <div id="div1"> 
       <img src="smallimg1/>
       <img src="smallimg2/> 
       <img src="smallimg3/>
       <img src="smallimg4/> 
    </div>
    <div id="div2"> 
       <img src="bigimg1/>          
    </div>

</div> 

CSS code

img
{
float:left;
}
#div1
{
width:50%;
}
#div2
{
width:50%;
}