Question

我有一个内联块元素列表，它们会换行以形成多行。我想在行之间显示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的样式是绝对定位的，可以通过在所需的块元素标记之后插入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;
}

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

2 个答案: