Automatische Höhe bei relativ positioniertem Element

Question

Ich habe ein relativ positioniertes div mit vielen absolut positionierten img in ihm:

<div class="container">
     <img />
     <img />
</div>

.container{
    position: relative;
    border: 4px solid #ccc;
}
.container img
{
    position: absolute;
}

Was will ich erreichen? Ich verwende eine jquery image fader plugin um Bilder ein- und auszublenden.

Die Bilder werden angezeigt, aber der Container lässt sich nicht auf die Höhe strecken. Wie kann ich das beheben?

Answer 1

Vollständig positionierte Elemente werden aus dem normalen Fluss herausgenommen und nicht zur Berechnung der Höhe anderer Elemente verwendet.

Sie müssen die Höhe explizit festlegen. Idealerweise kennen Sie die Größe der Bilder im Voraus und legen sie in Ihrem Stylesheet fest, oder Sie messen sie mit JavaScript.

Eine andere Möglichkeit wäre, die absolute Positionierung durch etwas anderes zu ersetzen (was dieses andere sein könnte, hängt von dem Effekt ab, den Sie erreichen wollen).

Answer 2

Die absolut positionierten Bilder sind aufgrund der absoluten Positionierung nicht Teil des Divs für Rendering-Zwecke konisdered. Erwägen Sie die Verwendung einer relativen Positionierung oder festen Mindesthöhe für das img oder div.