jquery – 在内联块包裹的行下面添加一个div

我有一个内联块元素列表,它们包装形成几行.我想在行之间显示div元素,具体取决于特定元素的位置.例如,前几行编号：

numbered inline-block elements http://i43.tinypic.com/2zxw9jt.jpg

如果我想要定位第三个元素并显示一个全长元素(包含块的div的100％),那么它将如下所示：

between first and second rows http://i39.tinypic.com/qsr51h.jpg

对于任何块1-5,全长div的位置将是相同的.或者,如果目标是另一个块,如7或8,它看起来像：

between second and third rows http://i43.tinypic.com/j14lua.jpg

注意行是如何“向下移动”的.我理解如何使用块级元素执行此操作,但不能在包装的内联块元素行之间执行此操作.每个编号块将打开的行将随浏览器窗口宽度的变化而变化,而全长div将“知道”位于下方的哪一行.

如何将div放在特定行元素下面？ CSS有某种相对或绝对的位置吗？当窗口宽度变化重新排序时,行位置是否会动态变化？

更新：
这是一个codepen,它有块和插入的div. div被设计为绝对定位,并且可以通过在所需的块元素标签之后插入来移动到适当的位置,但是我仍然无法获得它下方的行以腾出空间并向下滑动.

解决方法

这是另一种选择：

http://jsfiddle.net/SYJaj/7/

没有必要让“横幅”绝对定位.只需给它显示：inline-block;像其他一样,并在jQuery中使用offset方法计算它需要遵循的块.

关键在于此代码：

function placeAfter($block) {
    $block.after($('#content'));
}

$('.wrapblock').click(function() {
    $('#content').css('display','inline-block');
    var top = $(this).offset().top;
    var $blocks = $(this).nextAll('.wrapblock');
    if ($blocks.length == 0) {
        placeAfter($(this));
        return false;
    }
    $blocks.each(function(i,j) {
        if($(this).offset().top != top) {
            placeAfter($(this).prev('.wrapblock'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });
});

编辑：更改样式表看起来像你的.