Étendre le DIV au-delà de l'élément de liste parent

Question

J'ai une liste ordonnée qui est en fait un affichage de produits sur une page. Dans chaque élément de la liste ( li ), il y a du contenu suivi d'un div contenant un peu plus de contenu, avant de fermer l'élément de liste.

J'ai besoin que le div de chaque élément de liste s'étende (sa largeur) au-delà de l'élément de liste parent et remplisse réellement la largeur de la liste ordonnée ( ol ). Chaque div doit également se situer directement sous son élément de liste parent et pousser vers le bas tous les éléments de liste suivants.

Je sais que cela n'a probablement pas de sens, ce n'est pas très facile à expliquer.

Voici le HTML que j'ai jusqu'à présent :

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

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

Voici un schéma de la liste qui pourrait aider à lui donner un peu de sens :

Answer 1

Pour ce faire, vous devez utiliser jQuery. Vous pouvez ajouter une classe "expandable" à chacune des boîtes d'information et, dans la css, la faire afficher:none ; ensuite, lorsque vous cliquez sur le bouton d'information parent, utilisez jQuery pour positionner la boîte comme vous le souhaitez (et ramener l'affichage à visible, ajouter une animation, un fondu, etc.) Vous devrez faire en sorte que jQuery traverse votre code html et place la boîte d'information dans la zone appropriée.

Answer 2

J'ai essayé quelque chose de similaire avec des états de survol en css, vous pouvez voir mes résultats ici : Popouts CSS

C'est similaire parce que j'ai un div imbriqué qui est défini comme display:none par défaut et qui est défini comme display:block par un survol n'importe où sur l'élément de la liste.

Le div flotte au-dessus du reste du contenu, au lieu de le repousser comme semblent l'indiquer vos maquettes. Vous devrez peut-être faire appel à du JS, comme l'ont mentionné @JohnP et @Collin White.