divを入れ子divの下に配置するにはどうすればいいですか？

divを入れ子divの下に配置するにはどうすればよいですか？今、3番目のdiv（.box3）は2番目のdiv（.box2）の下に表示したいときに2番目のdivと重なり合っているようです。画面サイズが狭く時に私の問題がさらに拡大されhttps://jsfiddle.net/662fwmq5/divを入れ子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>

：例を参照してください。 3番目のdiv（.box3）が画面サイズの変更に応答して、3番目のdivが常に2番目のdiv（.box2）の下に表示されるようにします。

出典

2016-10-17 Sun P.

box1の固定高さを設定しました。そのため、次のdivがネストされたコンテンツと重なっているのです。

のでbox1からheightを削除して、そこに行く：

.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>

あなたは高さを変更できない場合は、overflow-y: autoを使用して、それをオーバーフローすることができます

.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>

出典

2016-10-17 16:21:03 kukkuz

ありがとうございます。これは役に立ちました。 –

uがcontainerdivを使用して、それの外box1とbox2内側とbox3を置くことができる最も簡単かつ関連性があるだろう。..

出典

2016-10-17 16:23:26

ありがとうございます。これも参考になります。 –

ur welcome ..... –

divを入れ子divの下に配置するにはどうすればいいですか？

答えて

関連する問題