0

我正在使用一个表格来显示一些数据，对于一行，我正在显示一个（可能）更长的字符串的 35 个字符的预览。当用户将鼠标悬停在其中一个预览上时，它会在其旁边显示全文。

问题是显示全文时，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 里面放一个你的详细信息并将其设置为position: absolute;. 这应该适用于 99%。

于 2013-03-20T21:30:04.583 回答
1

问题是，当您将对象设置为相对时，它与周围的对象相关。这意味着如果你改变 div 的高度（或者在这种情况下，显示它），周围的对象将适应这种变化。因此，当您将 div 设置为可见时，封装它的 td 也会改变它的高度。

将 div 设置为绝对位置可以解决问题，但是可能很难将其正确定位。除非你把它放在另一个 div 中。如果你将绝对 div 放在相对 div 中，那么绝对 div 对 relavite 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 回答