我怎么能做到这一点？喜欢使用常规的html和css

Question

有没有办法在不使用jquery的情况下实现这一目标？

图像的宽度将从小，中，大变化。产品将具有尺寸的属性。

我考虑过只使用浮动左边，但是因为大图片会强制左下角一次，直到下一行。

如果我必须使用jquery，哪个插件最好？

编辑：列表的顺序各不相同，这意味着图片的大小始终不在同一个位置。向左漂，向右漂浮不会工作

Answer 1

您可能正在寻找jQuery Masonry：

  

Masonry是jQuery的动态网格布局插件。把它想象成   CSS的反面浮动。浮动排列元素   水平然后垂直，砌体垂直排列，   将每个元素定位在网格中的下一个开放点。结果   最小化不同高度的元素之间的垂直间隙，就像   石匠在墙上贴石头。

Answer 2

制作包含底部4辆车（小型车）和漂浮的车厢

Answer 3

使用这个div结构可能吗？所以红色有全宽，其他是50％

Answer 4

尝试以下结构

    <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代码

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