2

状況依存のヘルプ テキスト用にページの領域を確保したいと考えています。特定の要素にカーソルを合わせた場合を除いて、空白です。しかし、もちろん、いくつかの独立したテキストがあり、そこから可視選択が選択される可能性があります。これはページ フロー内にあり、その下にさらに多くのものがあります。「配置された」divを使用して、その中にヘルプdivを入れてみました。各ヘルプ div は position: absolute; です。上: 0px; 可視性: 非表示; JS がそれらの 1 つを一度に表示できるようにすることを意図していましたが、ヘルプ div のいずれかの最大のテキスト部分のためにスペースが確保されていました。ほとんどの人が推測しているように、ヘルプ div は position: absolute であるため、それらの高さはそれを囲む div の高さに影響せず、最終的には高さが 0 になります。

どうすればこれを達成できますか？高さを強制するためにピクセル サイズ変更を使用したくありません。ブラウザーとフォントの組み合わせによっては、ほとんどの場合間違っているためです。これに追加。

私は理にかなっていましたか、それとも絵を描く必要がありますか?

4

1 に答える 1

4

うん、あなたは理にかなっています。あなたが正しく示しているように、サイズのあるフローの子が含まれていないため、含まれている要素は高さゼロに折りたたまれています。Javascript に頼らない限り、これに対する単純な解決策はありません。明らかな代替手段は、それらすべてをフロー レイアウトの一部にすることを意味し、コンテナがすべてのテキストに対応するように拡張することを意味します。

うまくいく解決策：

  1. すべてのヘルプ テキストに適用display:inline-blockして並べて配置し、10000px必要に応じて 幅以上のコンテナ要素に配置し、その要素を でコンテナにカプセル化しoverflow:hiddenます。このようにして、コンテナは実際に最大の子の高さを想定します。テキストをアクティブにするには、DOM 内の要素を前面に移動して最初に描画するか、スクロールして正しい位置に移動する必要がありますが、これは複雑になる可能性があります。
  2. ページを読み込んだ後、Javascript を使用して要素の実際の高さを測定し、最大のものをコンテナーの高さとして設定し、display:none代わりに子に適用しますvisibility:hidden。

2 番目のオプションは最も簡単で、私の好みの選択です。より良い代替手段があるかどうかは、特定のケースによって異なります。

于 2013-10-25T01:27:49.580 に答える