Question

我在页面上横向放置div。实际上它们看起来像表中的行。当用户点击div时，它可能会改变其高度，例如从120px到240px。这就是问题发生的地方。

当div扩展时，我希望它能推动其他人进入＆＃39;列。下。但这不是发生了什么。

.tile { width: 300px; border: 1px solid black; height: 120px; margin: 8px; display: inline-block; }

<div id='outer'>
    <div class='tile'>Notice 1</div>
    <div class='tile'>Notice 2</div>
    <div class='tile'>Notice 3</div>
    <div class='tile'>Notice 4</div>
    <div class='tile'>Notice 5</div>
    <div class='tile'>Notice 6</div>
    <div style='background: red;' onclick='this.style.height="250px"' class='tile'>Notice 7</div>
    <div class='tile'>Notice 8</div>
    <div class='tile'>Notice 9</div>
    <div class='tile'>Notice 10</div>
    <div class='tile'>Notice 11</div>
    <div class='tile'>Notice 12</div>
</div>

...它会增加整个＆＃39;行的高度。（单击红色图块以查看效果。调整结果视图大小以试验不同的浏览器宽度）。

当我在本地尝试相同的代码时（在Firefox中），我得到了一个不同的（虽然仍然不需要）效果。当＆＃39;小区＆＃39;扩展后，下面的行被缩短，以便消耗的单元格的右边缘被缩短。是后续行的最左边。

我可以想办法用javascript来做到这一点，但如果可以的话，我真的很想避免它。

Answer 1

尝试将float:left;放在图块类

上

Answer 2

我认为只有你有不同的单元格（基于宽度的数字）才有可能，它很容易用js。 float：left也不起作用（看起来只有宽度通知7和2-4个单元格）

Answer 3

好的，所以我最终安装了Masonry库，http://masonry.desandro.com/，这太棒了。我正在寻找什么，还有更多。真正改善了用户体验。（谢谢David DeSandro！）

如何布置具有可变高度的这些图块

3 个答案: