Question

<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。

Answer 1

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

然后在你的CSS中：

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

Answer 2

嘿，现在只需在你的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/的实时演示

在div中定位元素

2 个答案: