インラインブロックラップされた行の下にdivを追加します

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

全長DIVの位置は、ブロック1~5のいずれかのために同じです。行は「シフトダウン」されているか

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

注意：別のブロックが標的にされた場合は、7または8のように、それは次のようになります。私はブロックレベルの要素でこれを行う方法を理解していますが、ラップされたインラインブロック要素の行の間にはありません。ブラウザウィンドウの幅が変更されると、番号付きの各ブロックが配置される行が変更され、全長のdivは、どの行が下に配置されるかを「知る」でしょう。

div要素をその特定の行の下に配置するにはどうすればよいですか？ CSSで何らかの相対的な位置や絶対的な位置で可能でしょうか？ブロックがウィンドウの幅の変更で並べ替えられると、行の位置が動的に変化しますか？

更新： ブロックと挿入されたdivを持つcodepenがあります。 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; 
     } 
    }); 
}); 

EDIT：あなたのように見えるようにスタイルシートを変更しました。

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