1

有什么方法可以在不使用 jquery 的情况下完成此操作？

在此处输入图像描述

图像的宽度会从小、中和大变化。产品将具有大小属性​​。

我考虑过只使用左浮动，但这不会起作用，因为大图会迫使 2 左下角一次，一直到下一行。

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

编辑：列表的顺序不同，这意味着图片的大小不会总是在同一位置。向左浮动，向右浮动将不起作用

4

4 回答 4

4

也许您正在寻找jQuery Masonry：

Masonry 是一个 jQuery 的动态网格布局插件。将其视为 CSS 浮动的另一面。浮动将元素水平排列然后垂直排列，而砌体垂直排列元素，将每个元素定位在网格中的下一个开放点。结果使不同高度的元素之间的垂直间隙最小化，就像石匠在墙上安装石头一样。

于 2013-01-16T09:31:58.487 回答
1

也许使用这个 div 结构？所以红色是全宽，其他是 50%

于 2013-01-16T09:31:51.770 回答
1

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

于 2013-01-16T09:28:00.273 回答
0

试试下面的结构

    <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%;
}
于 2013-01-16T09:45:59.590 回答