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>

必要なのは、2つのスパン（1つはクラスmm_msg_identで、もう1つはその直後）が常にdivの右上隅に配置されていることを確認することです。問題は、divのサイズが可変であり、可変のままでなければならないことです。jquery1.6.4にアクセスできます。それを達成するためにこれらの要素をどのようにスタイリングするかについての提案はありますか？

編集：問題の2つのスパンのサイズがそれぞれ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に1つのプロパティを追加するだけです

.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コードの1つのcssを置き換えるだけです

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

不透明度のあるライブデモhttp://jsfiddle.net/svkQx/2/

于 2012-06-14T11:03:59.493 に答える