Div mit Text und 3 divs drinnen füllen es

Question

Ich möchte ein div erstellen, die Auto-Höhe basierend auf der Länge des Textes darin hat (der Text sollte im Elternelement sein, so dass es 100% Breite hat. aber auch sollte es 3 divs seine im Hintergrund jeweils unter 1/3 der Mutter Breite und ist 100% der Stammhöhe.

Dies ist ein Beispiel dafür, was ich erwarte.

Irgendwelche Ideen, wie man das schafft?

• Ich poste normalerweise keine Fragen wie diese. Aber ich habe gerade stecken, wie das zu tun, und ich brauchte Hilfe

Answer 1

Sie können Flexbox verwenden für dieses

.content { 
 
    display: flex; 
 
    position: relative; 
 
} 
 
h1 { 
 
    text-transform: uppercase; 
 
    font-size: 45px; 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    word-spacing: 15px; 
 
} 
 
.divs { 
 
    position: absolute; 
 
    z-index: -1; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    display: flex; 
 
} 
 
.el { 
 
    flex: 1; 
 
    border: 3px solid lightgreen; 
 
} 
 
.el:nth-child(1) {background: #DBEBD4;} 
 
.el:nth-child(2) {background: #CEE2F4;} 
 
.el:nth-child(3) {background: #D9D2EA;}

<div class="content"> 
 
    <h1>Lorem ipsum dolor sit.</h1> 
 
    <div class="divs"> 
 
    <div class="el"></div> 
 
    <div class="el"></div> 
 
    <div class="el"></div> 
 
    </div> 
 
</div>

Answer 2

Haben ein div-Container absolut unter dem Text positioniert und dann habe drei divs darin.

Der Grund für den Container div ist, dass es vermieden wird, jedes Kind einzeln zu positionieren.

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    position: relative; 
 
} 
 
.underlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    border: 1px solid grey; 
 
} 
 
.child { 
 
    flex:1; 
 
border:1px solid red; 
 
background: rgba(255,0,255,0.25); 
 
z-index:-1; 
 
}

<div class="parent"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt natus architecto deserunt eligendi repellat corporis doloribus fugit ipsam fugiat, eius vitae, magni? Quasi consequatur voluptatem eius excepturi eum qui dolores placeat maxime corporis 
 
    laborum hic, magnam ipsa voluptatibus doloremque. Dignissimos dolorum corporis sunt amet unde repellat, dolor consectetur earum.</p> 
 
    <div class="underlay"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
</div>