Zwei div Überlappung mit variabler Höhe = ohne Höhe auf Container

Es ist ziemlich einfach, zwei Div-Überlappung zu machen, wenn die Größe des Containers div bekannt ist, aber was ist, wenn die div heigh nicht kann?Zwei div Überlappung mit variabler Höhe = ohne Höhe auf Container

Ich habe versucht, es zu tun, ohne Behälterhöhe zu manipulieren: http://jsfiddle.net/AJfAV/ Aber #text2#text3 gehen und nicht „Push“ es. Wie kann die Größe automatisch angepasst werden?

schaffe ich mein Ziel mit jQuery UI zu erreichen, aber ich finde, dass das nicht eine elegante Lösung ist: http://jsfiddle.net/AJfAV/6/

Quelle

2013-05-09 user1707414

ist es ein Problem, wenn #container eine feste Breite hat ?? –

Ist das, was Sie brauchen?

Updated fiddle:

Ich gründe height auf die Standardeinstellung, auto, mit jQuery, wie folgt aus:

$("#container").css("height", "auto");

können Sie auch festlegen: height: auto; in CSS.

Quelle

2013-05-09 15:44:49 flavian

Es funktioniert nicht. Zumindest so, wie ich es erwartet hatte. – user1707414

Ich fügte eine Lösung hinzu, um genau zu zeigen, was ich erwartete, aber ich bin überrascht, Höhe des Containers muss http://jsfiddle.net/AJfAV/5/ behoben werden. In Ihrer Lösung/Geige, "Text3: Dies sollte unter Text1 und Text2 erscheinen" erscheint nicht unter Text1. – user1707414

Benötigen Sie Position: Absolut? Sie können absolute Positionierung verwenden, wenn Sie keine Anordnung, sondern eine Platzierung vornehmen möchten. Die absolute Positionierung nimmt ein Element vollständig aus dem Fluss der Elemente heraus. Sie wissen nichts von ihrer Existenz.

Sie können Floats und eine Technik zum Einschließen von Floats verwenden. Ich verwende clear:

.cl-left { 
    clear: left; 
    height: .1px; 
    font-size: 0; 
    line-height: 0; 
}

Vergessen Sie nicht, <div class="cl-left"> </div> hinzuzufügen.

Zusätzlich wird eine negative Marge verwendet. Daher wird # text2 nach rechts genagelt.

http://jsfiddle.net/AJfAV/7/

Quelle

2013-05-09 19:26:58 Salomonder

In der Tat brauche ich nicht unbedingt. Ich möchte den Fluss der Elemente so behalten wie sie sind, aber ich bin nicht in der Lage, eine Lösung ohne Position zu finden: absolut. – user1707414

Sie können Floats verwenden, aber CSS-Tabellen funktionieren nicht, da Fading die Anzeigeeigenschaft beeinflusst. Außerdem sind die Ränder nicht auf Tabellenzellen anwendbar. – Salomonder

Habe ich falsch verstanden? – Salomonder

kann dies gelöst werden, wenn man die absolute Positionierung von #text1 und #text2 entfernt.

und machen #text2 Überlappung #text1 durch beide float:left machen und stellen margin-left:-30px für #text2.

jetzt machen wir es testen: http://jsfiddle.net/RPe4H/

das Problem ist jetzt, dass, wenn #text1 umgeschaltet wird, #text2 schwimmt von #container, dies geschieht nach links oben, weil JQuery display:none auf das Element gesetzt, wenn fertig ist Makeln.

jetzt dieses Problem zu lösen, setzen # text1 und # text2 in Containern mit gleicher Breite, so #text nicht die Strömung nicht beeinträchtigt, wenn es um display:none gesetzt ist, müssen Sie auch min-height:1px auf den Behälter von #text1 eingestellt.

jetzt es funktioniert wie erwartet http://jsfiddle.net/MyyF6/1/

Quelle

2013-05-09 22:45:04

Zwei div Überlappung mit variabler Höhe = ohne Höhe auf Container

Antwort

Verwandte Themen