如何样让DIV自由排列，下上左右间距一样。不管每个DIV有多高-ASP.NET教程-爱易网页

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

日期：2014-05-17　浏览次数：20411 次

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

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

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

推荐的一种，在推荐一个jquery瀑布流插件:jquery masonry
------解决方案--------------------
瀑布流啊，看代码

HTML code


<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Jquery瀑布流布局（</title>
<style type="text/css">
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 }
</style>
<script src="waterfall_files/jquery-1.js" type="text/javascript"></script>
</head>
<body>
<ul id="lxf-box">
  <li style="top: 0px; left: 0px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/OLqypfV.jpg"></a>
    <h3>编号：0，高度：247</h3>
  </li>
  <li style="top: 0px; left: 232px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/msbvKWyQQzZuZy.jpg"></a>
    <h3>编号：1，高度：348</h3>
  </li>
  <li style="top: 0px; left: 464px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/WbWXwqpcxqcued.jpg"></a>
    <h3>编号：2，高度：341</h3>
  </li>
  <li style="top: 0px; left: 696px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/rabGVkIGq.jpg"></a>
    <h3>编号：3，高度：172</h3>
  </li>
  <li style="top: 0px; left: 928px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/rSmEiZGlAvvuZ.jpg"></a>
    <h3>编号：4，高度：295</h3>
  </li>
  <li style="top: 0px; left: 1160px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/YewRtz.jpg"></a>
    <h3>编号：5，高度：331</h3>
  </li>
  <li style="top: 182px; left: 696px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/STVDndiZsIduZyLv.jpg"></a>
    <h3>编号：6，高度：349</h3>
  </li>
  <li style="top: 257px; left: 0px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/mWFuVrzCzpPdzdje.jpg"></a>
    <h3>编号：7，高度：247</h3>
  </li>
  <li style="top: 305px; left: 928px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/MsZvAyOFukxdzdjefXwi.jpg"></a>
    <h3>编号：8，高度：313</h3>
  </li>
  <li style="top: 341px; left: 1160px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/OEycuedk.jpg"></a>
    <h3>编号：9，高度：320</h3>
  </li>
  <li style="top: 351px; left: 464px;"><a href="http://www.liuxiaofan.com/"><img src="waterfall_files/YwabRquVKrxd.jpg"></a>
    <h3>编号：10，高度：179</h3>
  </li>
  <li style="top: 358px; left: 232px;"><

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>