0

テーブルを使用して一部のデータを表示しています。1 つの行について、(おそらく) 長い文字列の 35 文字のプレビューを表示しています。ユーザーがプレビューの 1 つにマウスを合わせると、その横に全文が表示されます。

問題は全文表示時、全文trに合わせて高さを変えてしまうのですが、同じサイズのままにしておきたいです。

<td><a href="link.asp?tid=<%=ID%>" onmouseover="showDetails(<%=ID%>);"><%=shortPreview%></a>
<br/><div class="details" style="display:none;" id="<%=ID%>"><%=rsTickets("details")%></div></td>

CSS

.details {
  position:relative;
  top:-15px;
  left:260px;
  background-color:#FFFFAA;
  z-index:1;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:15px;
  padding-left:5px;
  border:1px;
  border-style:solid;
  border-color:#CCCC99;

  -moz-border-radius: 1em 2em 2em 1em;
  border-radius: 1em 2em 2em 1em;
}
4

2 に答える 2

2

セル内に固定サイズのdivを配置し、に設定しposition: relativeます。そのdivの中に、詳細を1つ入れて、に設定しposition: absolute;ます。これは99％で機能するはずです。

于 2013-03-20T21:30:04.583 に答える
1

オブジェクトを相対的に設定すると、そのオブジェクトは周囲のオブジェクトに対して相対的になります。これは、div の高さを変更すると (この場合はそれを表示する場合)、周囲のオブジェクトがこの変更に適応することを意味します。したがって、div を可視に設定すると、それをカプセル化する td の高さも変更されます。

div を絶対位置に設定すると問題は解決しますが、正しい位置に配置するのが難しくなる可能性があります。別のdivに入れない限り。相対 div 内に絶対 div を配置すると、絶対 div は相対 div に対して絶対になり、問題が解決します。次に例を示します。

<table>
    <tr><td><div style=position:relative>
          This div will not affect the td more than will this text.
          <div style=position:absolute;top10px;>
               This div will not affect the td, since it's absolute, and will be
               10px from the top of the outer div
          </div>
    </div></td></tr>
</table>

これでうまくいくはずです。少なくとも私にとってはうまくいきます。

于 2013-03-20T22:09:46.920 に答える