Question

无法在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的新手，所以我需要两件事的帮助。在我的造型中是否有过度使用属性？ “建筑海报”div总是在图像之下。我怎样才能在图像的右侧获得它？

非常感谢！

Answer 1

您需要浮动图像，添加：

div.browseBuildsArea-pro img.champion {
    float: left;
}

Answer 2

由于您未使用任何position:relative，<div>，left和top，因此您无需在right上指定bottom这些div上的属性。但是对于IE7等旧版浏览器来说这是一个好主意。

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

试图在我的图像旁边获得一个div

2 个答案: