Ho un div in un altro div. Il div interno ha margini di 0, auto per centralizzarlo. Tuttavia, non riesco a farlo fluttuare verso il basso senza renderlo assoluto. Esiste comunque la possibilità di fare un div relativo flottante sul fondo di un div normale?Posiziona div a fondo di un div diverso, senza usare Assoluto
Senza usare position: absolute, dovresti allinearlo verticalmente.
È possibile utilizzare vertical-align: bottom che, secondo the docs:
La proprietà CSS vertical-align specifica l'allineamento verticale di una linea o casella table-cell.
Quindi, o impostare il div esterno come un elemento inline, o come 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>come avrei fatto anche la parte centrale interna, allineata al centro? – user3506938
'text-align: center' sul lato esterno, o' margin: 0 auto' sul lato interno. – LcSalazar
@ user3506938 - Se stai parlando di centro verticale, è 'vertical-align: middle;' – LcSalazar
È possibile farlo impostando al valore superiore al 100%.
<div class="outer">
<div class="inner"></div>
</div>
.outer {height:400px;width:400px;background:#eaeaea;}
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;}
check-out questo violino qui: http://jsfiddle.net/62wqufgk/
questo non sembra funzionare. l'immagine è troppo bassa e fuori dal div – user3506938
L'utente desidera che il div interno sia allineato al fondo del div esterno. Il violino fornito (guardalo) mette "l'interno" (che non è più "interno") * sotto * quello "esterno". – Pere
Aggiungi questo stile al div interiore.
position: relative;
top: 100%;
transform: translateY(-100%);
L'unico modo che ho trovato, a meno che il contenuto è una statica altezza, è stato quello di farlo con jQuery in questo modo:
$(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'));
});
Questo funziona per una colonna-div all'interno di un containing- div, se l'altezza di un'altra colonna è maggiore.
E 'incredibile questa cosa semplice non e 'costruito in' tramite un css-proprietà (ad esempio "float: basso"), che non si rompe tutto il resto con assoluti, ecc
"float" non avrebbe senso. L'intento del float è quello di spostare gli elementi a sinistra o a destra di altri elementi sulla stessa riga. Il suo uso era molto abusato, in cui i CSS non avevano metodi alternativi. – Rob
Al giorno d'oggi si può semplicemente utilizzare display: flex per tutti questi problemi di allineamento.
Nel tuo caso puoi semplicemente rendere il genitore flessibile, direzione flessibile column (il valore predefinito è riga) e justify-content: flex-end. Il vantaggio di questo approccio è che funziona anche se si hanno più elementi nel genitore.
Se si dispone di quelle multiple e vogliono avere tutti allineati a partire dall'inizio del genitore fino alla fine, è possibile modificare justify-content ad un'altra proprietà, come space-between o space-evenly.
#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>
Alcuni codice ci darebbe una migliore comprensione del problema –
Cosa c'è di sbagliato con l'utilizzo di 'posizione: absolute'? –
ho un testo all'interno dello stesso dive per la reattività l'immagine si sovrappone al testo quando lo schermo è piccolo. – user3506938