jquery - 在行内块包装行下方添加一个 div

Question

我有一个内联块元素列表，这些元素可以换行以形成多行。我想在行之间显示一个 div 元素，具体取决于特定元素的位置。例如，前几行编号：

如果我想定位第三个元素并显示一个全长元素（包含块的 div 的 100%），那么它看起来像这样：

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

注意行是如何“下移”的。我了解如何使用块级元素执行此操作，但不是在包装的内联块元素行之间。每个编号块所在的行会随着浏览器窗口宽度的变化而变化，并且全长 div 将“知道”位于哪一行下方。

有人会如何将 div 放在特定的元素行下方？是否可以使用 CSS 进行某种相对或绝对位置？随着窗口宽度的变化对块进行重新排序，行位置是否会动态变化？

更新： 这是一个包含块和插入的 div 的代码笔。div 的样式设置为绝对定位，可以通过将其插入到所需的块元素标记之后将其移动到适当的位置，但我仍然无法获得它下方的行以腾出空间并向下滑动。

Answer 1

这是一个不同的选择：

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

没有必要让“横幅”绝对定位。只需像其他所有内容一样给出它，并使用jQuery 中display:inline-block;的方法计算它需要遵循的块。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;
        }
    });
});

编辑：将样式表更改为看起来像您的样式表。

Answer 2

已接受的挑战。仅 CSS 的解决方案：

http://codepen.io/mlhaufe/pen/aONRGP

HTML：

<div class="container">
    <label class="item">
        <input type="radio" name="rdo-visible">
        <span class="box">1</span>
        <span class="block">1. Lipsum Lipsum</span>
    </label>
    ...
</div>

CSS：

* {
    box-sizing: border-box;
}
.container {
    position: relative;
    outline: 1px solid green;
    width: 60%;
    margin:auto;
    font: 16pt sans-serif;
}
.item {
    position: static;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
    width: 50px;
    overflow: visible;
}
[name=rdo-visible] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
[name=rdo-visible]:checked ~ .box {
    margin-bottom: 2em;
}
[name=rdo-visible]:checked ~ .block {
    display: block;
    margin-top: -1.6em;
}
.box {
    display: block;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: red;
    color: white;
    line-height: 50px;
    text-align: center;
}
.block {
    display: none;
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2em;
    line-height: 2em;
    background-color: blue;
    color: white;
}