2012-08-06 11 views
10

Wie kann ich Elemente mit position:absolute und dynamische Höhe besetzen vertikalen Raum mit nur CSS? Gibt es einen Trick mit Containern und Display, den ich verwenden kann?Vertikaler Platz auf Elementen mit Position: absolut

+0

'Position: absolute' bedeutet, dass sie in der Strömung besetzen Raum nicht. Bitte posten Sie ein Beispiel, was Sie versuchen zu tun –

+0

Ich animiere eine Reihe von divs von rechts nach links in js mit Positionen, aber die Struktur könnte durch irgendetwas. Ich fragte mich, ob es vielleicht einen nicht so legalen Trick gab, den vertikalen Raum zu nutzen (vielleicht nicht) – Yisela

Antwort

9

Leider bedeutet die absolute Positionierung definitionsgemäß, dass Ihr Element keinen Platz mehr einnimmt. Also nein, nur durch CSS gibt es keine Möglichkeit, dies zu tun.

Sie können natürlich jQuery (oder plain javascript) verwenden, um dies zu erreichen. Wie ich es tun würde, ist ein space Element neben jedem vertikalen Element. Schließen Sie sowohl das Raumelement als auch das absolut positionierte vertikale Element in einem relativ positionierten div ein. Ändern Sie beim Laden der Seite die height des Raumelements so, dass sie der Höhe des vertikalen Elements entspricht.

3

position: absolute bedeutet, dass sie keinen Platz in der Strömung einnehmen. Sie müssen den Rand jedoch nicht animieren. Sie können float verwenden, damit die Elemente den Platz einnehmen und jedes der Elemente position:relative.

div.animate-me { 
    width: 300px; 
    margin: 20px; 
    float: left; 
    left: -1000px; // Make them start offscreen 
    position: relative; 
    border: 1px solid red; 
    visibility: hidden 
}​ 

$('div').css().animate({ 
    left: 0 
}); 

SAMPLEhttp://jsfiddle.net/qxzzX/1/

Verwandte Themen