Dodaj div poniżej linii owiniętej wiersz-wiersz

Question

Mam listę bloków śródliniowych, które zawijają się, tworząc kilka wierszy. Chciałbym wyświetlić element div między wierszami, w zależności od tego, gdzie znajduje się konkretny element. Na przykład, kilka pierwszych wiersze są numerowane:

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

Gdybym chciał kierować trzeci element i wyświetlanie elementu pełnej długości (100% div zawierającego bloki), wówczas będzie to wyglądać tak :

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

stanowisko pełnej długości div byłyby takie same dla każdego z bloków 1-5. Lub, jeśli inny blok został skierowany, jak 7 albo 8, to będzie wyglądać:

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

Zauważ, że wiersze są „przesunięte w dół”. Rozumiem, jak to zrobić z elementami blokowymi, ale nie pomiędzy wierszami zawijanych elementów wbudowanych w blok. Wiersze, w których każdy z ponumerowanych bloków byłby włączony, zmieniałyby się wraz ze zmianą szerokości okna przeglądarki, a div o pełnej długości "wie", który wiersz ma być umieszczony poniżej.

Jak ktoś chciałby umieścić div poniżej tego rzędu elementów? Czy to możliwe z jakąś względną lub absolutną pozycją z CSS? Czy pozycja wiersza może się zmieniać dynamicznie, gdy klocki są zamieniane wraz ze zmianami szerokości okna?

UPDATE: Oto codepen że ma bloki i włożoną div. Element div jest ustawiony w taki sposób, aby był absolutnie umiejscowiony i można go przenieść do odpowiedniej pozycji, wstawiając go po żądanym znaczniku elementu blokowego, ale nadal nie mogę uzyskać wiersza znajdującego się pod nim, aby zrobić miejsce i zjechać w dół.

Answer 1

Oto inna alternatywa:

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

Nie ma potrzeby, aby mieć „transparent” być pozycjonowane absolutnie. Po prostu dajcie mu display:inline-block;, tak jak wszystko inne, i obliczyć, który blok musi być zgodny z metodą offset w jQuery.

Klucz jest w tym kodzie:

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: Zmieniono stylów wyglądać twoje.

Answer 2

Przyjęte zaproszenie. Tylko CSS rozwiązanie:

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