1

I am laying divs out on a page, horizontally. Effectively they look like rows in a table. When the user clicks on a div it may change its height, e.g. from 120px to 240px. This is where the problem occurs.

When the div expands I want it to push the others in the 'column' down. That's not what's happening though.

In this JS Fiddle:

.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>

...it increases the height of the entire 'row'. (Click the red tile to see the effect. Resize the results view to experiment with different browser widths).

When I try the same code natively (in Firefox), I get a different (though still unwanted) effect. When the 'cell' is expanded, the rows below are shortened so that the right edge of the expended 'cell' is the left most edge of the subsequent rows.

I can think of ways to do this with javascript but I'd really like to avoid it if I could.

4

3 回答 3

1

尝试float:left;上瓷砖课

于 2013-09-03T07:12:05.180 回答
0

好的，所以我最终安装了 Masonry 库，http ://masonry.desandro.com/ ，它非常棒。做我正在寻找的东西，还有更多。真正提升了用户体验。（谢谢，大卫·德桑德罗！）

于 2013-09-10T22:15:26.503 回答
0

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

于 2013-09-03T07:18:10.730 回答