定位元素

<td id="name_3869-0_0" style="position: relative; " colspan="4"> 
    <div style="float:left;width:100%"> 
     <img src="/img/1.gif" align="middle" style="margin-right: 10px;" class="company_symbol" border="0"> 
     <strong style="margin: auto 5px auto auto; ">yyyy</strong> 
     <a href="#"><span title="xxxx">xxxx</span></a> 
     <span class="mm_msg_ident"><img onclick="mm_Msg.sel('[1]730228')" src="/view/new_design/img/msg_unchecked.gif" border="0" align="top" alt="Private message to the owner of subdivision" title="Private message to the owner of subdivision"></span> 
     <span><a href="#" title="Cancel the contract" alt="Cancel the contract" onclick="return contractDestroy(1510428, 'xxxxx')"><img src="/img/smallX.gif" alt="Cancel the contract" border="0" align="top" style="margin-right: 1px"></a></span> 
     <input type="hidden" name="supplyContractData[selected][]" value="1510428"> 
    </div> 
</td>

我需要的是確保兩個跨（一個帶班mm_msg_ident，和一個緊隨其後）始終定位於div的右上角。問題是div的大小是可變的，並且必須保持可變。我有權訪問jquery 1.6.4。有關如何設計這些元素來完成這些任務的任何建議？定位元素

編輯：假設所關注的兩個跨度的大小均爲20x20。

來源

2012-06-14 codetantra

沒有必要的jQuery，只需使用'位置：fixed' – undefined

set position: relative; on <div>並給它一個例如在你的CSS container

則：

.container span { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.mm_msg_ident { 
    right 20px; 
}

來源

2012-06-14 11:02:06 Luca

感謝名單的工作原理完全一樣，我需要:) – codetantra

嘿，現在只需加一個屬性在你的CSS像這樣

.wrapper:hover .description { 
    cursor: pointer; 
    display: block; 
}

嘿，現在你可以做到這一點沒有的jQuery像這樣

級的CSS

.wrapper { 
    background-color: #FFFFFF; 
    border: 1px solid #0D5A2C; 
    height: 250px; 
    margin: 0 auto; 
    padding: 8px; 
    position: relative; 
    width: 250px; 
} 


.description { 
    background-color: #000000; 
    color: #FFFFFF; 
    display: none; 
    font-size: 1em; 
    left:8px; 
    right:8px; 
    top:8px; 
    bottom:8px; 
    padding: 120px 0 0; 
    position: absolute; 
    text-decoration: none; 
    text-align:center; 
} 
.wrapper:hover .description{ 
display:block; 
}

HTML

<div class="wrapper"> 
<img alt="Hamster on Swing" src="http://www.webdesignlondon-tristar.co.uk/tutorials/jquery/imagedivrollover/hamster.jpg"> 


<a class="description" title="Click for More" href="#"> 
<img alt="Search" src="http://www.webdesignlondon-tristar.co.uk/tutorials/jquery/imagedivrollover/search.png">Want to read more? 
</a> 


</div>

現場演示http://jsfiddle.net/svkQx/1/

，如果你現在想比用於此

不透明只是更換一個CSS在你的CSS代碼

.description { 
    background:rgba(0,0,0,0.7); 
}

與不透明現場演示http://jsfiddle.net/svkQx/2/

來源

2012-06-14 11:03:59

回答

相關問題