0

无法在 jsfiddle 上发布此内容，因为它似乎已关闭。

div.browseBuildsArea-pro 
{
   float: left; 
   position: relative;
   width: 790px; 
   height: 90px; 
   background-image:url('../images/builds/builds-bg-pro.jpg'); 
   background-repeat:no-repeat;
}

div.browseBuildsArea-pro img.champion 
{
   display: block;
   height: 72px;
   margin-left: 14px;
   margin-top: 7px;
   border-radius: 9px;
   -moz-border-radius: 9px;
   -khtml-border-radius: 9px;
   -webkit-border-radius: 9px;
}

div.browseBuildsArea-pro div.build-poster 
{
    display: block;
    position: relative;
    margin-left: 150px;
    margin-top: 10px;
}

<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">

<div class="build-poster">
    awdwada
</div>
</div>

我是 CSS 新手，所以我需要两件事上的帮助。我的样式中是否过度使用了属性？“build-poster” div 总是在图像下。我怎样才能把它放在图像的右侧？

非常感谢！

4

2 回答 2

0

您需要浮动图像，添加：

div.browseBuildsArea-pro img.champion {
    float: left;
}
于 2013-01-31T16:00:43.883 回答
0

您不需要指定position:relativeon，因为<div>您没有在这些 div 上使用任何left、top和属性。但是，对于 IE7 等较旧的浏览器来说，这是一个好主意。rightbottom

你需要添加float:left到img.champion类

于 2013-01-31T16:02:22.150 回答