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

Question

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

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

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

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

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

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

Answer 1

这里有一个不同的选择：

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

没有必要让“横幅”绝对定位。只需像其他所有内容一样给它display: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;
        }
    });
});

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

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