0

This is what im doing:

  • I have a list of CD tracks (im using a table for tabular data)
  • The lyrics for each track is hidden below the name of the track, inside a div
  • when i click the track, the lyrics pops up, right to the name of the track

The issue i'm having is with the width of an absoulte element inside a relative element. For some reason, the width of the absolute element is the max width of the relative element.

In my case, the width of the lyrics popup is the max width of the relative cell data.

What i want is for the absolute element width to flow naturally without any defined width constraint. This way the lyrics line breaka are ok... I could define a width for the lyrics popup, but then some lyrics will have an ugly empty right space... I want my project to be perfect!!

Any ideas how to do this? Thanks

the text line brak is defined by the width... i dont want that

my html:

<table class="tbl-track">
  <tbody>
    <tr>
      <td>1</td> //width: 20px

      <td class="track-name"> //width: 350px
        <a class="track" href="">track 1</a>
        <div class="lyrics" style="display:none;">
          lyrics goes here<br />
          line 1<br/>
          line 2<br />
          ...<br />
        </div>
      </td>

      <td>duration</td> //width: auto

      <td>play button</td> //width: 20px
    </tr>
  </tbody>
</table>

this is my css:

.tbl-track td.track-name {position:relative;}
.lyrics {position:absolute; left:0; top:-20px; background:#000; padding:20px; z-index:999}

this is my jquery:

$('a.track').click(function(e) {    
  var w = $(this).width();
  var this_lyrics = $(this).next('.lyrics');
  var duration = 200;

  // hide opened lyrics before displaying a new one
  $('.lyrics').fadeOut(100);

  this_lyrics.hide().css({left:w + 20}).fadeIn(duration);

  e.preventDefault();
});
4

2 回答 2

1

这样的事情呢？http://jsfiddle.net/NVV9Y/

我添加的主要修复是 .lyrics 框的最小宽度。它至少保持 175px 宽度，但如果宽度超过 175px，它也会扩展到 div 的宽度。

我认为如果您希望根据歌词的实际宽度调整每一个的大小，只需将 class="small"、class="med" 或 class="wide" 添加到 .lyrics 框和相应的 CSS 中。因此：http: //jsfiddle.net/NVV9Y/1/

于 2012-05-25T05:26:26.327 回答
1

编辑/更正：

指定“宽度：自动；” 在 .lyrics 中并没有解决它。也尝试“浮动”并不能解决它。

检查这篇文章：http ://www.alistapart.com/articles/conflictingabsolutepositions/你根本做不到。所以不好。

我的建议是使用 JS 将 div 移动到“body”，然后你就有了自由宽度。完成后，将 div 移回放置它的位置（如果需要）。或者只是在 BODY 下创建它们/如果可以的话，将它们全部留在 Body 下，因为这对用户来说更容易和更快。

而且，如果你想尝试别的，这是我的压缩测试 HTML：

<html>
 <head>
  <style>
    #rel {
       position: relative;
       top: 100px;
       left: 100px;
       width: 300px;
       height: 300px;
       background: red;
    }
    #abs {
       position: absolute;
       left: 100;
       background: green;
       width: auto;
    }
  </style>
 </head>
 <body>
   <div id="rel">
     <div id="abs">asd fasdf sadf sadf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sda f sda f sdaf sd af sda fsda fsdafsda fsd af sdaf sda fsad f sdaf sdaf sda f sda f sda fs adf sd af sda f sda f sda fsd af s adf sda f s fas sdf</div>
   </div>
 </body>
</html>
于 2012-05-25T03:57:59.780 回答