这样的div紧凑效果如何排？

scyyzgxh 楼主

下面是一个简单的结构，运行后，因为ul里面内容长度不一，所以不能对齐，有些div与div间有比较长的空白，现在想无论内容是多少，只要是空白，都有内容自动去补充，不知道能不能实现？

<div style="height:100%;text-align:left;"> <div style="width:980px;height:auto;overflow:auto;border-bottom:1px #ddd solid;"> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> <div style="display:inline-block;float:left;overflow:auto;width:195px;border:1px solid #cfe;"> <ul> <li>内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <li>内容层内容层内容层内容层内容层内容层</li> <ul> </div> </div> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

leilay

js
凑字数补丁.exe

scyyzgxh 楼主

leilay 发表于 2012-3-1 20:45
js
凑字数补丁.exe

这是个神马东西？

cloudboy

LZ说的是DIV瀑布流么？
http://bbs.blueidea.com/thread-3043696-1-1.html

huliyue

http://www.tocapall.cn  这种效果是怎么做的啊。。。。。。。。。。。。。

scyyzgxh 楼主

cloudboy 发表于 2012-3-2 14:28
LZ说的是DIV瀑布流么？
http://bbs.blueidea.com/thread-3043696-1-1.html

和这意思差不多，但是你这瀑布流用到js控制。。并且是固定格式one，two，three这三列了，好像对于绑定数据不太好，因为我的数据并不用js动态填充。。。不知道只用css能行不。。。

treebear

瀑布流~~~~~~~

yccl

瀑布流现在很流行啊

104210854

http://idsoo.com/
类似于这个网站么？

scyyzgxh 楼主

差不多，不过我的不要求动态添加，只是紧凑就行了，要求不是固定列数的，最底部空出来的用颜色div填充。。。