11 Stimmen

Versuch, div innerhalb von div vertikal auszurichten

Ich versuche, ein div innerhalb eines anderen div unten vertikal auszurichten, und ich möchte keine relative/absolute Positionierung verwenden. unten ist mein Markup. es scheint zu funktionieren. aber ich bin nicht sicher, ob dies die beste Lösung ist. kann jemand eine bessere Methode empfehlen? auch in FF, wenn ich den Rahmen um den Container entferne, funktioniert es nicht mehr. weiß jemand warum? danke konstantin

<html>
<head>
    <style type="text/css">
        .container
        {
            background-color: #ffff00;
            height: 100px;
            line-height: 100px;
            border: solid 1px #666666;
        }
        .container .content
        {
            margin-top: 60px;
            background-color: #ffbbbb;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">test</div>
    </div>
</body>
</html>

30voto

Jasper Punkte 10923

Verwenden Sie die absolute Positionierung. Ich denke, dass der Grund, warum Sie keine absolute Positionierung verwenden wollen, auf einem Missverständnis beruht. Wenn nämlich auch der Container das Attribut position hat, bezieht sich die absolute Positionierung nicht auf die gesamte Seite, sondern auf den Container, und Sie bekommen, was Sie wollen:

.container
{
    position: relative;
}

.container .content
{
    position: absolute;
    bottom: 0px;
}

Unabhängig von der Größe des Containers befindet sich Ihr Inhalt nun am unteren Rand des Containers.

1voto

Dutchie432 Punkte 28344

Das wird funktionieren... nur werden Sie nicht in der Lage sein, etwas in die leeren oberen 60 Pixel zu setzen.

0voto

S.Jones Punkte 1147

Ich glaube, wenn Sie auf der Suche nach dem am besten Lösung sollten Sie tatsächlich die relative/absolute Positionierung verwenden.

Gibt es einen bestimmten Grund, warum Sie versuchen, relative/absolute Positionierung zu vermeiden?

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X