我正在设计一个简单的网站,我有一个问题。
我想要毕竟< div>带有class =“A”的标签,在< div>之后的底部有一个图像分隔符(参见图像,红色部分)。我正在使用CSS运算符:之后创建内容:
.A:after { content: ""; display: block; background: url(separador.png) center center no-repeat; height: 29px; }
问题是图像分隔符没有显示在< div>之后,而是在< div>的CONTENT之后,在我的情况下,我有一个段落< p>。我如何对此进行编码以使图像分隔符出现在AFTER< div class =“A”>之后,无论div A的高度和内容如何?
解决方法
定位您的< div>绝对在底部,不要忘记给div.A一个位置:相对 –
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; }