Развернуть DIV за пределы родительского элемента списка

Question

У меня есть упорядоченный список, который фактически отображает товары на странице. В каждом элементе списка (li) есть некоторый контент, за которым следует div, содержащий еще немного содержимого, перед закрытием элемента списка.

Мне нужно, чтобы div внутри каждого элемента списка расширялся (его ширина) за пределы родительского элемента списка и фактически заполнял ширину упорядоченного списка (ol). Каждый элемент div также должен находиться непосредственно под родительским элементом списка и опускать все последующие элементы списка.

Я знаю, что, вероятно, не имеет смысла, это не очень легко объяснить.

Вот HTML-код, который у меня есть:

<ol class="products group">
<li>
    <a href="#">
        <img src="assets/img/ind-aerospace.jpg" align="" />
        <h4>Product Title</h4>
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
    <a href="#">
        <img src="assets/img/ind-automotive.jpg" align="" />
        <h4>Product Title</h4>
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
    <!-- Expand this -->
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
    </div>
</li>
<li>
    <a href="#">
        <img src="assets/img/ind-power.jpg" align="" />
        <h4>Product Title</h4>
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
    <a href="#">
        <img src="assets/img/ind-power.jpg" align="" />
        <h4>Product Title</h4>
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
    <a href="#">
        <img src="assets/img/ind-power.jpg" align="" />
        <h4>Product Title</h4>
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
    <a href="#">
        <img src="assets/img/ind-power.jpg" align="" />
        <h4>Product Title</h4>
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>

Вот мой CSS:

ol.products {
    position: relative;
}
ol.products li {
    list-style: none;
    float: left;
    width: 30%;
    margin: 0 3% 1.5em 0;   
    border-bottom: dotted 1px #ed2124;
    border-bottom: dotted 1px rgba(237,33,36,.5);
}
ol.products li p {
    margin: .5em 0;
    min-height: 140px;
    line-height: 1.2em;
}
ol.products li div {
    position: relative;
    width: 100%;
    border: solid 1px red;
}
ol.products li div p {
    min-height: 0;
}

Вот каркас списка, который может помочь немного разобраться:

Answer 1

Я пробовал что-то похожее с состояниями наведения мыши, вы можете увидеть мои результаты здесь: CSS Popouts

Это похоже, потому что у меня есть вложенный div, который настроен для отображения: по умолчанию нетустанавливается для отображения: блокировать при наведении курсора в любом месте элемента списка.

Div вместо этого перемещает поверх другого содержимого, а не выталкивает его в сторону, как, кажется, указывают ваши каркасы.Возможно, вам придется использовать JS, например, @JohnP и @Collin White.

Answer 2

Вы должны использовать jQuery для достижения этой цели. Вы можете добавить «расширяемый» класс к каждому из информационных блоков, и в css он должен отображаться: нет; затем, когда вы нажимаете на кнопку родительской информации, используйте jQuery, чтобы расположить поле так, как вам нужно (и вернуть отображение в видимое, добавить анимацию, исчезнуть и т. д.). Вам нужно будет, чтобы jQuery прошел через ваш HTML и поместил информационное поле в нужную область.