Php 绝对元素在相对元素中的宽度问题_Php_Jquery_Css_Css Position

Php 绝对元素在相对元素中的宽度问题

php jquery css

Php 绝对元素在相对元素中的宽度问题,php,jquery,css,css-position,Php,Jquery,Css,Css Position,这就是我所做的：我有一个CD曲目列表（我使用表格数据）每个曲目的歌词隐藏在曲目名称下方的div中当我点击曲目时，歌词会弹出，就在曲目名称的右边我遇到的问题是相对元素中绝对元素的宽度。出于某种原因，绝对元素的宽度是相对元素的最大宽度在我的例子中，歌词弹出窗口的宽度是相对单元格数据的最大宽度我想要的是绝对元素宽度自然流动，没有任何定义的宽度约束。这样的歌词行breaka是好的。。。我可以为歌词弹出窗口定义一个宽度，但是有些歌词会有一个难看的空白。。。我希望我的项目是完美的有什么办法

这就是我所做的：

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

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

在我的例子中，歌词弹出窗口的宽度是相对单元格数据的最大宽度

我想要的是绝对元素宽度自然流动，没有任何定义的宽度约束。这样的歌词行breaka是好的。。。我可以为歌词弹出窗口定义一个宽度，但是有些歌词会有一个难看的空白。。。我希望我的项目是完美的

有什么办法吗？谢谢

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

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

编辑/更正：

在中指定“宽度：自动；”。歌词无法修复它。同样，尝试“浮动”也不能解决问题

检查这篇文章：你根本做不到。不太好

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

如果您想尝试其他内容，下面是我的压缩测试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>


#雷尔{
位置：相对位置；
顶部：100px；
左：100px；
宽度：300px；
高度：300px；
背景：红色；
}
#腹肌{
位置：绝对位置；
左:100 ;；
背景：绿色；
宽度：自动；
}
特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权特别提款权

像这样的东西怎么样

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

我想如果你想根据歌词的实际宽度来调整每一首歌的大小，只需将class=“small”、class=“med”或class=“wide”添加到.歌词框和相应的CSS中即可。因此：

尝试了这种方法和许多其他组合，但都没有成功。也许这是正常的行为？一个绝对元素的宽度是否应该在一个相对元素内部扩展？刚刚测试过：无法完成；还有这篇文章：-我将相应地编辑我的答案。你需要一个不同的解决方案。甚至stackoverflow说“做不到”。回到JS：从所有反馈来看，问题似乎与绝对元素的宽度有关。。。如果我加上一个固定的宽度，一切都很完美。。。所以我将使用jquery添加一个固定宽度，因为我已经在使用jquery弹出绝对元素。。。var-width_-lyris=此_-lyris.width（）；css（{width:width\u歌词}）；

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