情况:
_______________________________________
| .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
),但我不确定如何用这个标记来实现上面的结果......
答案 0 :(得分:2)
尝试这个想法,并使用jQuery的.after():
.ParentContainer div {
float: left;
clear: left;
}
div.Block2 {
float:right;
clear: none;
}
答案 1 :(得分:0)
在你的HTML中,你需要拥有Block1,Block3,Block2,并且还有1和3个浮动。要动态添加第三个块,请使用insertBefore。 insertBefore就像appendChild一样,但它允许你把它放在最后一个元素之前。
答案 2 :(得分:0)
您可以从块1和3中移除浮动,向右浮动块2。
但是,如果使用正确的浮动,则需要使用块2的负上边距来补偿块1的高度(听起来很复杂,但它不是)。见这里:http://jsfiddle.net/75SBx/3/
$('.b2').css('margin-top', '-' + $('.b1').css('height')); // can include margins, borders...