在一个div中使用多个类与图像

我在一个div中使用了两个类。我遇到的问题是我有两个不同的title divs，每个标题都会有它自己的图像。我无法弄清楚为什么每个标题都不会显示他们自己的图像。两张图片都会叠放在第一个div上，我做错了什么？在一个div中使用多个类与图像

演示 http://jsfiddle.net/mRRA4/

CSS

.title { 
border: 1px solid #AAA; 
padding: 4px 22px; 
} 


.icon-img1:before { 
position: absolute; 
top: 4px; 
left: 4px; 
content: ""; 
background: url(http://png-4.findicons.com/files/icons/366/icomic/24/images.png); 
width: 24px; 
height: 24px; 
} 

.icon-img2:before { 
position: absolute; 
top: 4px; 
left: 4px; 
content: ""; 
background: url(http://png-5.findicons.com/files/icons/753/gnome_desktop/24/gnome_emblem_photos.png); 
width: 24px; 
height: 24px; 
}

HTML

<div class="title icon-img1">Title 1</div> 
<div class="title icon-img2">Title 2 </div>

来源

2013-03-21 chillers

为什么不去掉所有'位置'？并将'.icon-img2：before'转换为'.icon-img2'？ – 2013-03-21 10:17:57

现在您.title添加position: relative;类

作为这样

.title { 
    position: relative; 
}

Demo

来源

2013-03-21 10:10:58

我尝试过'position：relative;'在img类上，但不是标题。谢谢！ – chillers 2013-03-21 10:13:01

您可以在标题类设置position: relative为罗希特建议或第二图像类添加32PX到top值。原因是position: absolute位置基于下一个具有位置属性的父元素。因此，您的图像都被定位在身体外，因此被放置在距离左上角4px处。给予标题position: relative意味着它将被用作子类的'锚点'。

来源

2013-03-21 10:19:13 gaynorvader

在一个div中使用多个类与图像

回答

相关问题