0 
<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 的大小。

4

2 回答 2

0

设置position: relative;并<div>给它一个类，例如container

然后在你的CSS中：

.container span {
    position: absolute;
    top: 0;
    right: 0;
}
.mm_msg_ident {
    right 20px;
}
于 2012-06-14T11:02:06.263 回答
0

嘿，现在只需在你的 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-14T11:03:59.493 回答