html - 可扩展的 div(点击时)，内联 block ，不下推第二行的其他 div

Question

我有两行，每行都有 DIV。第一行有 3 个 div。第二行有 2 个 div，最后一列留空。每个 div 都设置为内联 block ，因此它们可以彼此相邻。

第一行的第三个 div 有一个可折叠的链接，点击后展开。 div 变得比同一行上的其他 div 长。

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

这是我想要实现的目标的绘图。

Answer 1

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

HTML:

<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 ):

HTML:

<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;
}