Position div nach unten eines anderen div, ohne Absolute

Question

Ich habe ein div in einem anderen div. Das innere div hat Ränder von 0, automatisch, um es zu zentralisieren. Ich kann jedoch nicht erreichen, dass es auf den Boden schwebt, ohne es absolut zu machen. Gibt es überhaupt eine relative div float auf den Grund eines normalen div?

Answer 1

Ohne position: absolute zu verwenden, müssten Sie es vertikal ausrichten.

können vertical-align: bottom verwenden, die nach the docs:

Die vertical-align CSS-Eigenschaft um die vertikale Ausrichtung eines inline oder Tabellenzellenfeld gibt.

also entweder die äußere div als Inline-Element festgelegt oder als table-cell:

#outer { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
} 
 

 
#inner { 
 
    border: 1px solid green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>

Answer 2

Sie können dies tun, indem sie auf 100% nach oben Wert.

Html

<div class="outer"> 
<div class="inner"></div> 
</div> 

CSS

.outer {height:400px;width:400px;background:#eaeaea;} 
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;} 

Check diese Geige hier aus: http://jsfiddle.net/62wqufgk/

Answer 3

dieses Styling mit dem inneren div hinzufügen.

position: relative; 
top: 100%; 
transform: translateY(-100%); 

Answer 4

Der einzige Weg, ich fand, es sei denn, Ihre Inhalte eine statische Höhe ist, war es mit Jquery zu tun wie so:

$(document).ready(function(){ 
    inner_height = $('#inner-div').height(); 
    outer_height = $('#outer-div').height(); 
    margin_calc = (outer_height - inner_height) 
    $('#inner-div').css('margin-top', (margin_calc+'px')); 
}); 

Dies wird innerhalb einer containing- für eine Spalte-div arbeiten div, wenn die Höhe einer anderen Spalte größer ist.

Es ist unglaublich, diese einfache Sache ist, nicht über eine CSS-Eigenschaft ‚eingebaut‘ (dh „float: unten“), das alles andere mit Absoluten nicht brechen usw.

Answer 5

Heute können Sie einfach Verwenden Sie für alle diese Ausrichtungsprobleme display: flex.

In Ihrem Fall können Sie einfach die Eltern eine Flex-, Flex-Richtung column (der Standardwert ist Zeile) und justify-content: flex-end. Der Vorteil dieses Ansatzes besteht darin, dass es auch funktioniert, wenn Sie mehrere Elemente im übergeordneten Element haben.

Wenn Sie mehrere diejenigen haben und wollen, dass sie alle haben von Anfang an der Mutter bis zum Ende ausgerichtet sind, können Sie justify-content auf eine andere Eigenschaft wie space-between oder space-evenly ändern.

#outer { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-direction: column; 
 
} 
 

 
#inner { 
 
    border: 1px solid green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>