試圖讓我的圖片旁邊的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

回答

相關問題