Question

这就是我正在做的事情：

我有一个CD曲目列表（即时通讯使用表格数据表）
每个曲目的歌词隐藏在曲目名称下方，div
当我点击曲目时，歌词会弹出，直到歌曲的名称

我遇到的问题是相对元素中的absoulte元素的宽度。由于某种原因，绝对元素的宽度是相对元素的最大宽度。

在我的情况下，歌词弹出窗口的宽度是相对单元格数据的最大宽度。

我想要的是绝对元素宽度自然流动而没有任何定义的宽度约束。这种方式歌词行breaka是好的...我可以为歌词弹出定义一个宽度，但是一些歌词将有一个丑陋的空右空间...我希望我的项目是完美的！

任何想法如何做到这一点？感谢

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

我的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>

这是我的css：

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

这是我的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();
});

Answer 1

已编辑/已更正：

指定“width：auto;” in .lyrics无法修复它。尝试“浮动”并不能解决它。

检查这篇文章：http://www.alistapart.com/articles/conflictingabsolutepositions/你完全不能这样做。所以不好。

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

并且，如果你想尝试anthing else，这是我的压缩测试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>

Answer 2

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

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

我认为如果你想根据歌词的实际宽度来调整每一个的大小，只需将class =“small”，class =“med”或class =“wide”添加到.lyrics框中并对应CSS。因此：http://jsfiddle.net/NVV9Y/1/

问题与相对元素内的绝对元素的宽度有关

2 个答案: