Aggiungere un div al di sotto della riga spostata in blocco

Question

Ho un elenco di elementi di blocco in linea che eseguono il wrap per formare più righe. Mi piacerebbe visualizzare un elemento div tra on delle righe, a seconda di dove si trova un elemento specifico. Ad esempio, le prime righe sono numerate:

numbered inline-block elements http://i43.tinypic.com/2zxw9jt.jpg

Se avessi voluto indirizzare il terzo elemento e visualizzare un elemento a lunghezza piena (100% del div che contiene i blocchi), allora sarebbe simile a questa :

between first and second rows http://i39.tinypic.com/qsr51h.jpg

la posizione del div integrale sarebbe la stessa per qualsiasi dei blocchi 1-5. Oppure, se un altro blocco è stato preso di mira, come 7 o 8, sarebbe simile:

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

Notate come le righe vengono "spostati verso il basso". Capisco come farlo con gli elementi a livello di blocco, ma non tra le righe degli elementi di blocco in linea spostati. Le righe su cui sarebbero posizionati i blocchi numerati cambierebbero quando la larghezza della finestra del browser cambia e il div full-length "conoscerà" quale riga posizionare sotto.

Come farebbe qualcuno a posizionare il div al di sotto di quella particolare riga di elementi? È possibile con qualche tipo di posizione relativa o assoluta con i CSS? La posizione della riga potrebbe cambiare in modo dinamico quando i blocchi vengono riordinati con modifiche alla larghezza della finestra?

UPDATE: Ecco un codepen che ha i blocchi e il div inserito. Il div è progettato per essere posizionato in modo assoluto e può essere spostato nella posizione appropriata inserendolo dopo il tag dell'elemento di blocco desiderato, ma non riesco ancora a ottenere la riga sottostante per fare spazio e scorrere verso il basso.

Answer 1

Ecco un'alternativa diversa:

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

Non c'è bisogno di avere il "banner" essere posizionato in modo assoluto. Dagli semplicemente display:inline-block; come tutto il resto e calcola quale blocco deve seguire con il metodo offset in jQuery.

La chiave è in questo codice:

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: Cambiato il foglio di stile a guardare come la vostra.

Answer 2

Sfida accettata. Un CSS unica soluzione:

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