div+css布局的问题，float一直出问题 求高手指导一下。
蓝色div区域怎么排列啊，宽度都一样，高度不一样 而且高度是可以随意增加的。我把他们全部float:left;结果蓝5就会跑到第二行的右边，6、7、8会出现在第三行，如果高度都一样的话才会正常，可是相同的高度不是我想要的结果啊。求高手指点一下。
哎。超出文字最大字数。这代码怎么沾上来啊。
第1个回答 2013-07-11
给你一个思路：1和5形成一个div, 2和6形成一个div ， 3和7形成一个div ， 4和 8形成一个div，
并且这4个div都给予 float:left属性，这种参差不齐的效果，起码在代码上你要弄得整齐一点。
如果像你那样，12345678都是一个div当然做不到了，你那样形成的做法是：所有div都可以形成float, 1和6也能向左靠齐。2和8 也可以向左靠齐、这样是不合格的
并且这4个div都给予 float:left属性，这种参差不齐的效果，起码在代码上你要弄得整齐一点。
如果像你那样，12345678都是一个div当然做不到了，你那样形成的做法是：所有div都可以形成float, 1和6也能向左靠齐。2和8 也可以向左靠齐、这样是不合格的
第2个回答 2013-07-11
简单的FLOAT达不到效果的，这个布局类似于pinterest砖块瀑布流，你可以使用masonry.js，很简单。
配合infinit scroll 实现无限滚动的瀑布流布局。追问
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>//js代码
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200, //注意这个宽度是元素的总宽度，包括padding和margin和width，也可以不写
itemSelector: '.item'
});本回答被提问者采纳
配合infinit scroll 实现无限滚动的瀑布流布局。追问
我上网查了一下masonry.js，找到http://www.163css.com/hihilinxuan/log/634636908260054804.html。这个网址可是我没有学过不会啊，能帮我修改一下我的代码吗？给我一下邮箱，我发给你。
追答这是masonry.js的官方地址
很简单
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>//js代码
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200, //注意这个宽度是元素的总宽度，包括padding和margin和width，也可以不写
itemSelector: '.item'
});本回答被提问者采纳
第3个回答 2013-07-11
代码不给出来，怎么帮你处理呢？追问
代码太多了，所以我花了个简单的div布局图。能布局成这样而且可以循环增加蓝色DIV就行。
追答你复制粘贴过来不就行了
追问好的。我把它精简一下。要不太长了。。。。
第4个回答 2013-07-11
代码截图 传上来
相似回答