Question

情况：

 _______________________________________
|             .ParentContainer          |
|    _______      ____________          |
|   |       |    |            |         |
|   |.Block1|    |.Block2     |         |
|   |       |    |            |         |
|   |       |    |            |         |
|   |_______|    |            |         |
|                |            |         |
|                |            |         |
|                |            |         |
|                |            |         |
|                |____________|         |
|_______________________________________|

我需要在Block3之后动态添加Block2。更确切地说，在DOM中它需要在Block2之后，但在页面上它必须出现在Block1下面。

所以我想看到这样的事情：

 _______________________________________
|             .ParentContainer          |
|    _______      ____________          |
|   |       |    |            |         |
|   |.Block1|    |.Block2     |         |
|   |       |    |            |         |
|   |       |    |            |         |
|   |_______|    |            |         |
|                |            |         |
|    _______     |            |         |
|   |       |    |            |         |
|   |.Block3|    |            |         |
|   |       |    |            |         |
|   |       |    |____________|         |
|   |_______|                           |
|                                       |
|_______________________________________|

代码很简单：

<div class="ParentContainer clearfix">
    <div class="Block1 leftFloat></div>
    <div class="Block2 leftFloat></div>
</div>

我有jQuery会在block2之后追加下一个块（Block3），但我不确定如何用这个标记来实现上面的结果......

Answer 1

尝试这个想法，并使用jQuery的.after():

.ParentContainer div {
    float: left;
    clear: left;
}
div.Block2 {
    float:right;
    clear: none;
}

FIDDLE

Answer 2

在你的HTML中，你需要拥有Block1，Block3，Block2，并且还有1和3个浮动。要动态添加第三个块，请使用insertBefore。 insertBefore就像appendChild一样，但它允许你把它放在最后一个元素之前。

https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore?redirectlocale=en-US&redirectslug=DOM%2FNode.insertBefore

Answer 3

您可以从块1和3中移除浮动，向右浮动块2。

但是，如果使用正确的浮动，则需要使用块2的负上边距来补偿块1的高度（听起来很复杂，但它不是）。见这里：http://jsfiddle.net/75SBx/3/

$('.b2').css('margin-top', '-' + $('.b1').css('height')); // can include margins, borders...

如何使用CSS实现此定位？

3 个答案:

FIDDLE