可扩展的div (点击)，内联块，而不是按下第二行的其他div

Question

我有两条线，每条线上都有DIV。第一条线上有3个div。在第二行中有2个div，最后一列为空。每个div都设置为内联块，这样它们就可以相邻。

第一行上的第3 div有一个可折叠的链接，当单击该链接时会展开。在同一条线上，div变得比其他的长。

当该div被展开时，它自然地将div向下推到第二行。我希望第二条线上的div不被推倒。我怎样才能做到这一点？

这是我想要达到的目标。

​

​

Answer 1

我不知道您的代码的用途，但您可能希望将它们除以列，并避免负边距，如果这对您有效，fiddle here

<div id="Column1">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block clear"></div>
    <div class="block"></div>
</div>
<div class="block big"></div>

CSS

#Column1 {
    float: left;
}

.block {
    width: 50px;
    height: 80px;
    background: grey;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
}

.big {
    height: 170px;
}

否则，使用负边距(fiddle here)：

<div class="block"></div>
<div class="block"></div>
<div class="block big"></div>
<div class="block clear"></div>
<div class="block"></div>

CSS

.block {
    width: 50px;
    height: 80px;
    background: grey;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
}

.big {
    height: 170px;
    margin-bottom: -80px;
}

Answer 2

在这里被推倒的内容是正常的

可能的解决办法是去掉通过使用负边距增加的额外空间。

margin-bottom:-90px;

http://jsfiddle.net/ddtp9/1/