Wie kann ich dynamischen Text in ein div mit absoluter Position einfügen?

Question

Hier finden Sie aktuelle http://www.barelyfitz.com/ Screencasts / html-Training / css / Positionierung / Punkt 6. Dort heißt es:

  

Es ist keine praktikable Lösung für die meisten Designs, weil wir in der Regel nicht wissen, wie viel Text in den Elementen sein, oder die genauen Schriftgrößen, die verwendet werden.

Welche Abhilfe brauche ich zu verwenden, um dynamischen Text in ein div mit absoluter Position einfügen?

Jeder Ansatz ist willkommen

Grüße,

Answer 1

Wenn Ihr primäres Ziel ist es, das div zu halten in seinem Platz, ohne Änderung ist es Höhe oder Breite auf die Menge an Text basiert, würde ich gehen mit:

div {
    overflow: scroll;
}

Die andere Option ist die Textgröße zu haben, schrumpft in den div passen, aber das bringt eine gewisse Menge an Fuzzy-Mathematik und Sie laufen Gefahr, der Text so winzig ist, es ist sinnlos.

Wenn Sie die div ändern möchten ist es Höhe auf den Text basiert, dies beinhaltet auch einige Fuzzy-Mathematik, aber im Grunde, würden Sie die Länge des Textes mit bekommen:

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

Und die Höhenänderung auf diese Länge in Relation machen. Sie würden wollen, mit den Zahlen spielen, aber es würde so aussehen:

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");

Answer 2

finden Sie unter Visual Effect Abschnitt von W3C-Website hier

Answer 3

Vielleicht mit "overflow: auto" für die dynamic Text-Container div.So die Höhe kein Problem ist.

Answer 4

Das Problem setzt nicht den dynamischen Text in dem absolut positionierte div - das div wird passend zu erweitern, was Text drin ist. Es gibt keine Höhen definiert auf den roten und grünen divs in Ihrem Beispiel.

Absolut positionierte divs sind aus dem Fluss des Dokuments so etwas gemacht, die nach ihnen in dem HTML-Code erscheinen wird handeln, wie sie nicht einmal da sind.

Designs, die absolut positioniert divs verwenden müssen eine Höhe auf dem enthaltenden div definiert haben, so dass die absolut positionierte divs andere Inhalte nicht überlappen. In Ihrem Beispiel <div id="div-1"> hat eine Höhe von 250 Pixel definiert. Ändern Sie diesen zu 100px und Sie werden <div id="div-after"> Bewegung unter den roten und grünen divs sehen.

Wenn Sie also ein absolut positionierte div in einer Seitenleiste mit nichts, nachdem sie haben Sie alle dynamischen Text hinzufügen können, die Sie wollen. Wenn Sie in Ihrem Header haben, wird es gehen, um Ihre Konstruktion sehr kompliziert zu implementieren machen.