0

これは私がしていることです：

  • CDトラックのリストがあります（表形式のデータにテーブルを使用しています）
  • 各トラックの歌詞は、トラック名の下の div 内に隠されています。
  • トラックをクリックすると、トラックの名前のすぐ右に歌詞が表示されます

私が抱えている問題は、相対要素内の絶対要素の幅にあります。何らかの理由で、絶対要素の幅が相対要素の最大幅になっています。

私の場合、歌詞ポップアップの幅は相対セル データの最大幅です。

私が望むのは、絶対的な要素の幅が定義された幅の制約なしで自然に流れることです。このように、歌詞の改行は問題ありません... 歌詞のポップアップの幅を定義できますが、一部の歌詞には醜い空白の右側のスペースがあります... プロジェクトを完璧にしたい!!

これを行う方法はありますか？ありがとう

テキスト行のブレーキは幅によって定義されます...私はそれを望んでいません

私の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();
});
4

2 に答える 2

1

編集/修正:

「幅: 自動;」を指定します。in .lyrics では修正されません。また、「フロート」を試しても修正されません。

この記事を確認してください: http://www.alistapart.com/articles/conflictingabsolutepositions/まったくできません。だから良くない。

私の提案は、JS を使用して div を「本文」に移動し、自由な幅を確保することです。完了したら、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 に答える
1

このようなものはどうですか？http://jsfiddle.net/NVV9Y/

私が追加した主な修正は、.lyrics ボックスの最小幅です。幅は少なくとも 175 ピクセルのままですが、幅が 175 ピクセルを超える場合は、div の幅にも拡張されます。

歌詞の実際の幅に合わせてそれぞれのサイズを変更したい場合は、class="small"、class="med"、または class="wide" を .lyrics ボックスと対応する CSS に追加するだけです。そのため：http://jsfiddle.net/NVV9Y/1/

于 2012-05-25T05:26:26.327 に答える