试图让我的图片旁边的div

无法将它发布到jsfiddle上，因为它看起来不像样。试图让我的图片旁边的div

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始终在图像下。我怎样才能把它放在图像的右侧？

非常感谢！

来源

2013-01-31 Lyver Kinkki

，因为你不使用这些div的任何left，top，right和bottom特性你并不需要在<div>指定position:relative。不过，对于IE7等较旧的浏览器来说，这是个好主意。

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

来源

2013-01-31 16:02:22 keeg

默认是'static'，但是，是的，我看不出有任何理由在这个例子中定位它'relative'。 – Nix

谢谢我会调整答案 – keeg

您需要浮动图像，添加：

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

来源

2013-01-31 16:00:43 rlatief

试图让我的图片旁边的div

回答

相关问题