Come far fluire gli elementi figli fuori dal genitore? - html, css, css-float

Attualmente ho un file html con struttura DOM come questo:

<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

E voglio avere un layout come questo: i div "figlio" galleggiano all'esterno del genitore, allineandosi come celle di una tabella nella stessa riga, ogni figlio ha una larghezza maggiore e un'altezza inferiore rispetto al genitore e i div del figlio copriranno la parte inferiore del div del genitore. immagine ancora, quindi posso solo descriverlo), questo deve essere fatto senza cambiare la struttura DOM.

Ho provato a rendere gli elementi figlio inline blocchi e float a sinistra, ma sembrano solo continuare ad accumularsi, c'è un modo per raggiungerlo senza cambiare il DOM?

risposte:

È possibile utilizzare invece il posizionamento assoluto:

#parent{
height:300px; width:300px; position:relative;
}
.child{
height:100px; width:300px; position:absolute;
}
.child:first-child{
left:-50px;
}

Ovviamente, questa è solo una parte del CSS di cui hai bisogno.

Consiglio invece di usare flex:

display: flex

È più reattivo rispetto all'utilizzo

display: block
position: absolute

HTML:

<div id="parent">
<div class="child">hi</div>
<div class="child">hello</div>
<div class="child">hey</div>
</div>

CSS:

#parent {
display: flex;
flex-direction: row;
width: 400px;
}

.child {
flex-grow: 1;
height: 30px;
text-align: center;
color: white;
}

.child:nth-of-type(1) {
background:red;
}

.child:nth-of-type(2) {
background: green;
}

.child:nth-of-type(3) {
background: purple;
}

Ecco un esempio da jsfiddle: https://jsfiddle.net/pbu05aaL/