为什么同位素没有填满这个简单布局中的行？答案

【问题标题】：Why doesn't isotope fill the row in this simple layout?为什么同位素没有填满这个简单布局中的行？
【发布时间】：2013-08-19 06:57:31
【问题描述】：

我有一个简单的布局——三个彩色框在代码中一个接一个地跟随，所有的设计都是为了填充一个固定宽度的div。为什么同位素不把蓝色盒子放在绿色盒子旁边？我的目标是让所有的盒子尽可能多地填满空间。

代码超级简单：

<style>
.video {
    width:435px;
    height:265px;
    margin:20px;
    background-color:yellow;
}
.tweet {
    width:200px;
    height:165px;
    background-color:green;
}
.post {
    width:206px;
    height:260px;
    background-color:blue;
}
#iso {
    width:970px;
    border:solid 1px red;
}
</style>

<div id='iso'>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
</div>

$(function () {
    $('#iso').isotope({
        itemSelector: '.b',
        layoutMode: 'masonry'
    });
});

请随意在这里玩：

http://jsfiddle.net/pnoeric/Jn3UX/4/

【问题讨论】：

标签： jquery css jquery-isotope

【解决方案1】：

尝试使用：

$('#iso').isotope({
    itemSelector: '.b',
    layoutMode: 'fitRows'
});

我认为这就是你想要达到的效果。

小提琴：http://jsfiddle.net/Jn3UX/5/

【讨论】：