2012-04-02 13 views
1

Ich habe einen Stapel übereinander liegender Imgs, die nach Bedarf ein-/ausgeblendet werden. Damit sich diese Bilder überschneiden, muss ich position: absolute verwenden (ich verblasse zwischen ihnen, so dass ich mindestens zwei Bilder übereinander brauche). Ihr Container-Div ist floated, aber die Höhe der Bilder variiert, so dass ich keine feste Höhe für diesen übergeordneten Container festlegen kann. Ich brauche ihren Container, um ihre Höhe genau widerzuspiegeln, da es ein anderes floated div gibt, das den Container löscht, der unter dem Bild sitzen muss, egal in welcher Höhe.Absolut positionierte Elemente in einem Float

Gibt es eine Möglichkeit, dies zu erreichen, ohne JavaScript zu verwenden, um die Höhe des Containers für jedes Bild entsprechend anzupassen?

Hier ist ein Link zu der Seite, wie sie im Moment ist. Ich verwende Bilder mit identischen Höhen, aber ich möchte die Höhe der Bilder variieren können.

http://www.unwalked.com/

+0

Können Sie dies in einem jsFiddle zeigen? Ich bin mir nicht sicher, ob ich das Problem so verstehe, wie du es beschreibst. –

+0

Klingt so: http://jsfiddle.net/dJdXX/30/ Ich habe keine Zeit, mich weiter damit zu beschäftigen, aber ich denke, das zeigt das Problem. –

+1

Kurz gesagt, möchten Sie das Eltern (P) eines absoluten Positionselement (E) seine Höhe basierend E.height anpassen? Wenn dies der Fall ist, können Sie dies nicht ohne Javascript tun, da E nicht länger ein Kind von P ist, da die Position absolute es aus dem Fluss entfernt. – Bazzz

Antwort

0

Was passiert, wenn Sie nicht alle Kinder Bilder absolut positioniert machen, sondern nur vorübergehend position: absolute; auf das Bild gesetzt, die verklungen wird? Auf diese Weise würde sich der Container natürlich anpassen, um dem aktiven Bild zu entsprechen.

+0

Das ist schön zu denken. Wenn jedoch das ausgeblendete Bild größer als das eingeblendete Bild war, würde der gefloatete Behälter dann die Einblendungs-Bildhöhe kontrahieren, wobei das ausblendende Bild seine untere Kante überlappen würde. – Undistraction

+0

Ja, das stimmt. Aber wie soll es sich dann verhalten? Der beste Ansatz wäre, die Containerhöhenänderung sanft zu animieren, aber das beinhaltet Javascript (ich denke nicht, dass Sie dies mit CSS-Übergängen machen können, aber vielleicht liege ich falsch). –

+0

Ja, ich denke, ich werde Javascript irgendwo benutzen müssen; Meine Frage war, ob das alles ohne Javascript möglich war. Deine Antwort ist sehr nah, aber nicht ganz da. – Undistraction

Verwandte Themen