61,112
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
小昭 2012-02-15
- 打赏
- 举报
google一下瀑布流布局，网上有好几种方法的。选择合适自己的就好
happytonice 2012-01-01
- 打赏
- 举报
高度自适应，宽度没有自适应，都一样宽。
dongt1 2011-12-31
- 打赏
- 举报
去我空间看看我收集的 。也可以百度google
缺水的孩子 2011-12-19
- 打赏
- 举报
现在比较流行的 瀑布流布局方式，可以Google一下，有许多讲解这些布局的方式
小昭 2011-12-19
- 打赏
- 举报
只设置宽度，不设置高度，浮动记得清，就能实现高度自适应了。。
huijunliang 2011-12-16
- 打赏
- 举报
专业术语：瀑布流
米斯特王 2011-12-15
- 打赏
- 举报
看看代码去 研究下
livesguan 2011-12-15
- 打赏
- 举报
用火狐直接看元素,不就可以吗?
cwz3323 2011-12-15
- 打赏
- 举报
只是高度自适应 并且排序没有特殊要求的话太简单了 就像上面说的 左中右三栏 不设置高度即可 但是放置时需要花点心思。 如果像google图片那样 左右上下都需要计算 那就麻烦了
letian1989615 2011-12-15
- 打赏
- 举报
[Quote=引用 11 楼 v_b24589 的回复:]
一个大div，然后里边放三个div，里面的设置下margin的左右浮动值，然后高度自适应。这样应该就可以了。
[/Quote]
同感
一个大div，然后里边放三个div，里面的设置下margin的左右浮动值，然后高度自适应。这样应该就可以了。
[/Quote]
同感
天空深蓝 2011-12-15
- 打赏
- 举报
一个大div，然后里边放三个div，里面的设置下margin的左右浮动值，然后高度自适应。这样应该就可以了。
三石-gary 2011-12-14
- 打赏
- 举报
你可以去看看它的源码。。。
p2227 2011-12-14
- 打赏
- 举报
相互间隔是margin，高度是height，互相之间当然没影响了，你发图片不如发网址。
kuqijiedao 2011-12-14
- 打赏
- 举报
[Quote=引用 8 楼 kuqijiedao 的回复:]
<style>
.a,.b,.c{width:33%;height:200px;text-align:center}
.a,.b{float:left;}
.a{background:blue;margin-right:0.5%}
.b{background:#676776}
.c{background:green;float:right}
</style>
</head>
……
[/Quote]
div里面图片之间在设置固定上下间距
<style>
.a,.b,.c{width:33%;height:200px;text-align:center}
.a,.b{float:left;}
.a{background:blue;margin-right:0.5%}
.b{background:#676776}
.c{background:green;float:right}
</style>
</head>
……
[/Quote]
div里面图片之间在设置固定上下间距
p2227 2011-12-14
- 打赏
- 举报
初步分析了一下，那个网站估计是另外一个系统生成的，你搜索一下CMS就知道了
kuqijiedao 2011-12-14
- 打赏
- 举报
<style>
.a,.b,.c{width:33%;height:200px;text-align:center}
.a,.b{float:left;}
.a{background:blue;margin-right:0.5%}
.b{background:#676776}
.c{background:green;float:right}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c">
</div>
</body>
.a,.b,.c{width:33%;height:200px;text-align:center}
.a,.b{float:left;}
.a{background:blue;margin-right:0.5%}
.b{background:#676776}
.c{background:green;float:right}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c">
</div>
</body>
哈哈哈尔滨小子 2011-12-14
- 打赏
- 举报
就一种好奇，发现现在的有很多网站采用这种布局方式。
但不知道怎么实现。
[Quote=引用 5 楼 terminator_lzq 的回复:]
楼主认为这样排版好看吗
[/Quote]
但不知道怎么实现。
[Quote=引用 5 楼 terminator_lzq 的回复:]
楼主认为这样排版好看吗
[/Quote]
oggmm 2011-12-14
- 打赏
- 举报
绝对定位
然后用js去决定图片所在元素的位置
该算法是
每新增一张图片时，找已有图片中top+高度所在位置最短的那张图片
然后新增的图片的left位置跟它相同 top位置就按所需间距去设置就ok
然后用js去决定图片所在元素的位置
该算法是
每新增一张图片时，找已有图片中top+高度所在位置最短的那张图片
然后新增的图片的left位置跟它相同 top位置就按所需间距去设置就ok
CalvinR 2011-12-14
- 打赏
- 举报
楼主认为这样排版好看吗
哈哈哈尔滨小子 2011-12-14
- 打赏
- 举报
这只是我截的一张图。
可能我没表达清楚吧
一般常见的这类排版应该是上下左右对齐
但这种左右就没对齐，看起来像是三列。
附上网址：http://www.duitang.com/album/291182/
[Quote=引用楼主 netter2003 的回复:]
如图:
这是怎么做出来的？高会自适应，但相互间间隔都不变。
[/Quote]
可能我没表达清楚吧
一般常见的这类排版应该是上下左右对齐
但这种左右就没对齐，看起来像是三列。
附上网址：http://www.duitang.com/album/291182/
[Quote=引用楼主 netter2003 的回复:]
如图:
这是怎么做出来的？高会自适应，但相互间间隔都不变。
[/Quote]
