इनलाइन-ब्लॉक लिपटे पंक्ति

Question

नीचे एक div जोड़ें मेरे पास इनलाइन-ब्लॉक तत्वों की एक सूची है जो कई पंक्तियों को बनाने के लिए लपेटती हैं। मैं पंक्तियों के बीच एक 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 को रखने के बारे में कैसे जाएगा? क्या सीएसएस के साथ किसी प्रकार की सापेक्ष या पूर्ण स्थिति के साथ यह संभव है? पंक्ति की स्थिति गतिशील रूप से बदल सकती है क्योंकि ब्लॉक विंडो विंडो चौड़ाई के साथ पुन: व्यवस्थित होते हैं?

अद्यतन: यहाँ एक codepen ब्लॉक और डाला div किया है। Div को पूरी तरह से तैनात करने के लिए स्टाइल किया गया है, और वांछित ब्लॉक तत्व टैग के बाद इसे डालने से उचित स्थिति में स्थानांतरित किया जा सकता है, लेकिन मुझे अभी भी कमरे बनाने और स्लाइड करने के लिए नीचे की पंक्ति नहीं मिल सकती है।

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

"बैनर" के लिए कोई जरूरत नहीं है पूरी तरह से तैनात किया:

Answer 1

यहाँ एक अलग विकल्प है। बस इसे 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

चुनौती स्वीकार कर ली गई। एक सीएसएस एकमात्र समाधान:

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> 

सीएसएस:

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