如何样让DIV自由排列，下上左右间距一样。不管每个DIV有多高

怎么样让DIV自由排列，上下左右间距一样。不管每个DIV有多高。

下图变成下图，CSS该如何写

[解决办法]
楼主是要做瀑布流布局的吧，
这个有点麻烦，有两种解法：
1、所以div全部绝对定位，位置用js去算
2、如果列数是固定的话，可以外面搞固定的div用float定位好，
div里在添加任意div了，不过这种搞法绑定动态数据时候有点麻烦，要计算数据和行列数值。

推荐的一种，在推荐一个jquery瀑布流插件:jquery masonry
[解决办法]
瀑布流啊，看代码
HTML code
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;Jquery瀑布流布局（&lt;/title&gt;&lt;style type="text/css"&gt;body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }/*瀑布流布局样式*/#lxf-box { position: relative; }#lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; }h3 { padding-top: 8px; }img { width: 200px; height: auto; display: block; border: 0 }/*css3动画*/li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }&lt;/style&gt;&lt;script src="waterfall_files/jquery-1.js" type="text/javascript"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id="lxf-box"&gt;  &lt;li style="top: 0px; left: 0px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/OLqypfV.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：0，高度：247&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 0px; left: 232px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/msbvKWyQQzZuZy.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：1，高度：348&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 0px; left: 464px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/WbWXwqpcxqcued.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：2，高度：341&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 0px; left: 696px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/rabGVkIGq.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：3，高度：172&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 0px; left: 928px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/rSmEiZGlAvvuZ.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：4，高度：295&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 0px; left: 1160px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/YewRtz.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：5，高度：331&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 182px; left: 696px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/STVDndiZsIduZyLv.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：6，高度：349&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 257px; left: 0px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/mWFuVrzCzpPdzdje.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：7，高度：247&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 305px; left: 928px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/MsZvAyOFukxdzdjefXwi.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：8，高度：313&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 341px; left: 1160px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/OEycuedk.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：9，高度：320&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 351px; left: 464px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/YwabRquVKrxd.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：10，高度：179&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 358px; left: 232px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/nwbuJpc.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：11，高度：327&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 514px; left: 0px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/qymffF.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：12，高度：179&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 540px; left: 464px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/DvKZdxCjtfqMv.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：13，高度：311&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 541px; left: 696px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/SOmyOQZtlUfdzdjefXwi.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：14，高度：343&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 628px; left: 928px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/REsUNXUvAkrdzdj.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：15，高度：347&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 671px; left: 1160px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/DQJwrFnDpgtdz.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：16，高度：191&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 695px; left: 232px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/eJupzWlGPxz.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：17，高度：195&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 703px; left: 0px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/IWpjipjp.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：18，高度：284&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 861px; left: 464px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/OXsDgKacJeTdzdjefXwi.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：19，高度：197&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 872px; left: 1160px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/QPIzxiMkmlHdzdjefX.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：20，高度：180&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 894px; left: 696px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/mrTNaJTaQyluZyLvvnWS.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：21，高度：179&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 900px; left: 232px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/mqXLNuWiPrbdz.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：22，高度：179&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 985px; left: 928px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/MiEJRJdimxPdzdjefXw.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：23，高度：328&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 997px; left: 0px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/CczowVxqM.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：24，高度：347&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 1062px; left: 1160px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/rabGVkIGq.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：25，高度：172&lt;/h3&gt;  &lt;/li&gt;  &lt;li style="top: 1068px; left: 464px;"&gt;&lt;a href="http://www.liuxiaofan.com/"&gt;&lt;img src="waterfall_files/zwPqjasxHYvdz.jpg"&gt;&lt;/a&gt;    &lt;h3&gt;编号：26，高度：647&lt;/h3&gt;  &lt;/li&gt;&lt;/ul&gt;&lt;script&gt;/*原理：1.把所有的li的高度值放到数组里面     2.第一行的top都为0     3.计算高度值最小的值是哪个li     4.把接下来的li放到那个li的下面作者：刘晓帆博客地址：http://liuxiaofan.com编写时间：2012年6月9日*/var margin = 10;//这里设置间距var li=$("li");//这里是区块名称var    li_W = li[0].offsetWidth+margin;//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）function liuxiaofan(){//定义成函数便于调用    var h=[];//记录区块高度的数组    var n = document.documentElement.offsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块    for(var i = 0;i &lt; li.length;i++) {//有多少个li就循环多少次        li_H = li[i].offsetHeight;//获取每个li的高度        if(i &lt; n) {//n是一行最多的li，所以小于n就是第一行了            h[i]=li_H;//把每个li放到数组里面            li.eq(i).css("top",0);//第一行的Li的top值为0            li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度            }        else{            min_H =Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个            minKey = getarraykey(h, min_H);//最小的值对应的指针            h[minKey] += li_H+margin ;//加上新高度后更新高度值            li.eq(i).css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面            li.eq(i).css("left",minKey * li_W);    //第i个li的左坐标就是i*li的宽度        }        $("h3").eq(i).text("编号："+i+"，高度："+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面    }}/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}/*这里一定要用onload，因为图片不加载完就不知道高度值*/window.onload = function() {liuxiaofan();};/*浏览器窗口改变时也运行函数*/window.onresize = function() {liuxiaofan();};&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
如何样让DIV自由排列下上左右间距一

热点推荐
