Как стиль div под другим div в жидком макете

Question

У меня есть сложная комбинация HTML/css, которую я хочу достичь. Я могу иметь любое количество div в строке, и каждый из них будет иметь некоторую информацию, относящуюся к этому div. Дивы представлены как красные ящики в моей картине.

Каждый div будет иметь свой собственный синий ящик, который я хочу быть внутри него через HTML, но отображаю его под ним через css. Этот синий ящик должен отображаться только при нажатии на div, должен отображаться под div (и все остальные в этой строке, но ВЫШЕ всех разделов в следующей строке) и должен охватывать всю ширину родительского контейнера (так что это будет ширина 5 красных divs на этом рисунке). Возможно ли подобное? Я не могу придумать способ действительно сделать что-нибудь подобное. Я создал скрипку с быстрым макетом, что вы можете изменить: https://jsfiddle.net/hL8r9fu9/

.wrapper { 
    width:500px; 
    background:white; 
    height:500px; 
} 

.item { 
    float:left; 
    width: 18%; 
    margin-right:2%; 
    height:120px; 
    background:red; 
    margin-bottom:2%; 
} 

.info { 
    height:20px; 
    background:blue; 
} 

.info.is-hidden { 
    display:none; 
} 

Answer 1

Одним из способов вы можете определить элементы в строке против в другом ряд, чтобы использовать .offset().top на элементах (поскольку значение будет return same для всех div в одной строке).

$(document).ready(function(){ 
    $(".item").each(function(){ 
    var $this = $(this); 
    $this.click(function(){ 
    $this.find(".info").toggleClass("is-hidden"); 
     if($this.offset().top > 10) // just an example value , you need to adjust this . 
      $this.find(".info").css("top","0%"); 
    }); 
    }); 
}); 

Рабочий пример: https://jsfiddle.net/DinoMyte/hL8r9fu9/3/

Answer 2

Я был в состоянии сделать это с помощью следующего кода JQuery:

$('.inherit-wrapper').each(function(element) { 
    var $this = $(this), 
     property = $this.attr('wrapper-property'), 
     value = $this.parent().parent().css(property); 
    if(property && value) $this.css(property, value); 
}); 

См fiddle. Я заимствовал функцию от этого fiddle от iConner.

Answer 3

Я испортил ваш jsfiddle и here - это то, что я получил. Вам придется подстроить его, чтобы получить то, что вы хотите, но вы можете видеть, где я собираюсь с ним.

html то же самое и слегка подстроил css.

ЯШИ:

$(document).ready(function(){ 
    $(".item").click(function(){ 
     var $this = $(this); 
     var info = $this.find(".info"); 
     var infoTopPos = $this.offset().top; 
     var infoHeight = $this.height(); 
     var parentWidth = $this.parent().width(); 
     var parentLeftPos = $this.parent().offset().left; 
     $(".info").not(info).addClass('is-hidden'); 
     $(info).toggleClass('is-hidden'); 
     info.css({width: parentWidth, top: (infoTopPos+infoHeight)+'px', left: parentLeftPos}); 
    }); 
});