将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

您应该使用jQuery来完成此任务。您可以添加＆＃34;可扩展＆＃34;每个信息框和css中的类都显示：none;然后，当您单击父信息按钮时，使用jQuery根据需要定位框（并将显示返回到可见，添加动画，淡入淡出等）。你需要让jQuery遍历你的html并将信息框放在正确的区域。

Answer 2

我尝试过与css悬停状态类似的东西，你可以在这里看到我的结果： CSS Popouts

它是类似的，因为我有一个嵌套的div设置为display：none默认情况下，设置为display：block by hover list by list items。

然而，div浮动超过了其他内容，而不是像线框似乎表明的那样将其推开。你可能需要得到一些JS，比如@JohnP和@Collin White提到的。