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

Question

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

编号内联块元素http://i43.tinypic.com/2zxw9jt.jpg

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

在第一行和第二行之间http://i39.tinypic.com/qsr51h.jpg

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

在第二行和第三行之间http://i43.tinypic.com/j14lua.jpg

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

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

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

Answer 1

这是一个不同的选择：

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

没有必要让“横幅”绝对定位。display:inline-block;像其他所有东西一样给它，并用offsetjQuery中的方法计算它需要遵循哪个块。

关键就在这段代码中：

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

编辑：将样式表更改为您的样式表。