将DIV扩展到父级列表项之外 [英] Expand DIV beyond parent List Item

问题描述

我有一个有序列表，实际上是在页面上显示的产品.在关闭列表项之前，每个列表项( li )中都有一些内容，其后是 div ，其中包含更多内容.

I have an ordered list which is actually a display of products on a page. Within each list item (li) there is some content followed by a div containing some more content, before closing the list item.

我需要每个列表项中的div扩展(其宽度)超出其父列表项，并实际上填充有序列表的宽度( ol ).每个div还需要直接位于其父级列表项的下方，然后将以下任何列表项下推.

I need for the div within each list item to expand (its width) beyond its parent list item and actually fill the width of the ordered list (ol). Each div also needs to sit directly below its parent list item and push any following list items down.

我知道可能没有意义，解释起来也不容易.

I know the probably doesn't make sense, it's not very easy to explain.

这是我到目前为止使用的HTML:

Here's the HTML I have so far:

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

以下是列表的线框，可能会有所帮助:

Here's a wireframe of the list that might help it make a little sense:

推荐答案

我尝试使用css悬停状态进行类似的操作，您可以在此处查看我的结果: CSS弹出窗口

I tried something similar with css hover states, you can see my results here: CSS Popouts

这是相似的，因为我有一个嵌套的div，默认情况下将其设置为display:none，并且将其设置为display:block，将鼠标悬停在列表项中的任意位置.

It's similar because I have a nested div that's set to display:none by default and is set to display:block by a hover anywhere on the list item.

div会浮动在其他内容之上，而不是像线框所指示的那样将其推开.您可能需要像上面提到的@JohnP和@Collin White这样的JS.

The div floats overtop the other content though, rather than pushing it out of the way like your wireframes seem to indicate. You might have to get some JS going for you like @JohnP and @Collin White mentioned.

这篇关于将DIV扩展到父级列表项之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！