Wie platziere ich ein Div unter einem verschachtelten Div?

Wie platziere ich ein Div unter einem verschachtelten div? Im Moment scheint das dritte div (.box3) das zweite div zu überlappen, wenn es unter dem zweiten div (.box2) erscheinen soll. Bitte siehe Beispiel: https://jsfiddle.net/662fwmq5/Wie platziere ich ein Div unter einem verschachtelten Div?

.box1 { 
 
    width: 50%; 
 
    height: 200px; 
 
    padding: 15px; 
 
    background-color: red; 
 
    margin: 0 auto; 
 
} 
 
.box2 { 
 
    width: 80%; 
 
    padding: 15px; 
 
    background-color: blue; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
} 
 
.box3 { 
 
    background-color: #ccc; 
 
    text-align: center; 
 
}

<div class="box1"> 
 
    Box 1 
 
    <div class="box2"> 
 
    Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing. Equities revenue came in at 
 
    $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility. 
 
    </div> 
 
</div> 
 

 
<div class="box3"> 
 
    More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday. 
 
</div>

Mein Problem vergrößert wird weiter, wenn die Bildschirmgröße verjüngt. Ich möchte, dass das dritte div (.box3) auf Bildschirmgrößenänderungen reagiert, so dass das dritte div immer unter dem zweiten div (.box2) erscheint.

Quelle

2016-10-17 Sun P.

Sie haben eine feste Höhe für box1 festgelegt - deshalb überlappt das folgende div den verschachtelten Inhalt.

So entfernen Sie die height von box1 und Sie dorthin gehen:

.box1 { 
 
\t width: 50%; 
 
\t /*height: 200px;*/ 
 
\t padding: 15px; 
 
\t background-color: red; 
 
\t margin: 0 auto; 
 
} 
 

 
.box2 { 
 
\t width: 80%; 
 
\t padding: 15px; 
 
\t background-color: blue; 
 
\t color: #fff; 
 
\t margin: 0 auto; 
 
\t margin-top: 100px; 
 
} 
 

 
.box3 { 
 
\t background-color: #ccc; 
 
\t text-align: center; 
 
}

<body> 
 
\t <div class="box1"> 
 
\t Box 1 
 
\t \t <div class="box2"> 
 
\t \t Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing. 
 
\t \t Equities revenue came in at $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility. 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="box3"> 
 
\t \t More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday. 
 
\t </div> 
 
</body>

Wenn Sie nicht die Höhe ändern können, können Sie es überfluten overflow-y: auto mit:

.box1 { 
 
\t width: 50%; 
 
\t height: 200px; 
 
    overflow-y: scroll; 
 
\t padding: 15px; 
 
\t background-color: red; 
 
\t margin: 0 auto; 
 
} 
 

 
.box2 { 
 
\t width: 80%; 
 
\t padding: 15px; 
 
\t background-color: blue; 
 
\t color: #fff; 
 
\t margin: 0 auto; 
 
\t margin-top: 100px; 
 
} 
 

 
.box3 { 
 
\t background-color: #ccc; 
 
\t text-align: center; 
 
}

<body> 
 
\t <div class="box1"> 
 
\t Box 1 
 
\t \t <div class="box2"> 
 
\t \t Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing. 
 
\t \t Equities revenue came in at $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility. 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="box3"> 
 
\t \t More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday. 
 
\t </div> 
 
</body>

Quelle

2016-10-17 16:21:03 kukkuz

Danke. Das war hilfreich. –

u kann ein containerdiv verwenden und setzen box1 und box2 innerhalb und außerhalb box3 es die einfachste und relevant sein werden ..

Quelle

2016-10-17 16:23:26

Danke. Dies ist auch hilfreich. –

ur willkommen ..... –

Wie platziere ich ein Div unter einem verschachtelten Div?

Antwort

Verwandte Themen