DIV：后添加内容后DIV [英] DIV :after - add content after DIV

问题描述

我在设计一个简单的网站，我有一个问题。
我想要所有< div> 标签与 class =A在底部，紧接在< div> （参考图像，红色部分）之后。我使用CSS运算符：后创建内容：

I'm designing a simple website and I have a question. I want after all <div> tags with class="A" to have a image separator on the bottom, right after the <div> (refer to image, section in red). I'm using the CSS operator :after to create the content:

.A:after {
    content: "";
    display: block;
    background: url(separador.png) center center no-repeat;
    height: 29px;
}

问题是图像分隔符在< div> ，但紧接在< div> 的CONTENT之后， c>< p> 。我如何编码这样，所以图像分隔符出现AFTER < div class =A> ，不管div A的高度和内容？

The problem is that the image separator is not displaying AFTER the <div>, but right after the CONTENT of the <div>, in my case I have a paragraph <p>. How do I code this so the image separator appears AFTER <div class="A">, regardless of the height and content of div A?

推荐答案

将< div> 绝对放在底部， div.A a position：relative - http://jsfiddle.net/TTaMx/

Position your <div> absolutely at the bottom and don't forget to give div.A a position: relative - http://jsfiddle.net/TTaMx/

    .A {
        position: relative;
        margin: 40px 0;
        height: 40px;
        width: 200px;
        background: #eee;
    }

    .A:after {
        content: " ";
        display: block;
        background: #c00;
        height: 29px;
        width: 100%;

        position: absolute;
        bottom: -29px;
    }​

这篇关于DIV：后添加内容后DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！