jquery - 如何使用 CSS 实现此定位?

标签 jquery html css css-float

情况:

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

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

所以我想看到这样的东西:

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

代码很简单:

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

我有 jQuery,它将在 block2 之后附加下一个 block (Block3),但我不确定如何使用此标记实现上述结果...

最佳答案

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

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

FIDDLE

关于jquery - 如何使用 CSS 实现此定位?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20300025/

相关文章:

javascript - JQuery 创建 HTML 无法正常工作

html - 推特 Bootstrap : Same height for grid

html - Firefox 不支持背景图像转换?

html - div高度填满整个页面

html - 框阴影没有出现,当我检查元素时没有引用它

html - 水平滚动条不工作 asp.net

jquery - ipad click 适用于 ipad on safari

javascript - 针对 RegExp 的内部站点搜索 Jquery

javascript - 如何在django中使用javascript动态更改花括号中的div标签的类名

javascript - 在 MarkedJS 中渲染