2

http://www.barelyfitz.com/screencast/html-training/css/positioning/項目 6をご覧ください。

通常、要素に含まれるテキストの量や、使用される正確なフォント サイズがわからないため、ほとんどのデザインでは実行可能なソリューションではありません。

動的テキストを絶対位置の div に挿入するには、どのような回避策を使用する必要がありますか?

どんなアプローチでも大歓迎です

よろしく、

4

4 に答える 4

2

あなたの主な目標が、テキストの量に基づいて高さや幅を変更せずに、divをその場所に保持することである場合、私は次のようにします:

div {
    overflow: scroll;
}

もう 1 つのオプションは、div に収まるようにテキスト サイズを縮小することですが、これにはある程度のあいまいな計算が含まれ、テキストが小さすぎて無意味になるリスクがあります。

テキストに基づいて div の高さを変更する場合、これにはあいまいな数学も含まれますが、基本的には、次のようにテキストの長さを取得します。

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

そして、その長さに応じて高さを変えます。数字で遊んでみたいと思いますが、次のようになります。

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");
于 2009-09-12T04:59:24.153 に答える
1

こちらの W3C サイトの視覚効果セクションを参照してください。

于 2009-09-12T14:24:13.470 に答える
0

たぶん、動的テキスト コンテナーの div に"overflow: auto"を使用します。そのため、高さは問題になりません。

于 2009-09-12T04:52:48.600 に答える
0

問題は、動的テキストを絶対位置の div に配置することではありません。div は、そこにあるテキストに合わせて拡張されます。この例では、赤と緑の div に高さが定義されていません。

絶対位置の div はドキュメントのフローから除外されるため、html 内でそれらの後に表示されるものは、そこにさえないかのように動作します。

絶対配置の div を使用するデザインでは、絶対配置の div が他のコンテンツと重ならないように、含まれる div に高さを定義する必要があります。あなたの例<div id="div-1">では、250px の高さが定義されています。これを 100px に変更すると<div id="div-after">、赤と緑の div の下に移動が表示されます。

したがって、サイドバーに絶対配置の div があり、その後に何もない場合は、必要なすべての動的テキストを追加できます。ヘッダーに 1 つある場合、設計を実装するのが非常に複雑になります。

于 2009-09-13T12:28:31.640 に答える