は、複数のdiv

Question

コードとCodepenが含まれているナビゲーションフローターにボディフローターの最小の高さを調整します。

.wrapper1 { 
    overflow: hidden; 
    width: 700px; 
    border: 1px solid #000000; 
    padding: 20px; 
} 
.wrapper2 { 
    float: left; 
    width: 150px; 
} 
.content1 { 
    width: 100px; 
    border: 1px solid #000000; 
    margin-bottom: 20px; 
    padding: 10px; 
    background-color:#ffffff; 
} 
.content2 { 
    float: right; 
    width: 500px; 
    border: 1px solid #000000; 
    margin-bottom: 20px; 
    padding: 10px; 
    background-color:#ffffff; 
} 
.content2, .wrapper2 { 
    margin-bottom: -500em; 
    padding-bottom: 500em; 
} 
.wrapper3 { 
    clear: both; 
} 

<div class="wrapper1"> 

<div class="wrapper2"> 
<div class="content1"> 
text 
</div> 
<div class="content1"> 
text 
</div> 
</div> 

<div class="content2"> 
text 
</div> 
</div> 
<div class="wrapper3"></div> 

私はそれがとてもcontent2が最小で、高さのコンテンツに変更wrapper2、同じ高さであるようにしたいです。パディングとマージンを追加したり減算したりしようとしましたが、content2がwrapper1の底まで伸びていました。私はcontent2を2番目のcontent1ボックスの最後で終わらせたい。

Answer 1

これを行うにはflexを使用できます。デフォルトでは、親の高さを埋めるためにフレックス・ペアレントの子が行に表示され、stretchが表示されます。

.wrapper1 { 
 
\t width: 700px; 
 
\t border: 1px solid #000000; 
 
\t padding: 20px; 
 
    display: flex; 
 
} 
 
.wrapper2 { 
 
\t width: 150px; 
 
} 
 
.content1 { 
 
\t width: 100px; 
 
\t border: 1px solid #000000; 
 
\t margin-bottom: 20px; 
 
\t padding: 10px; 
 
\t background-color:#ffffff; 
 
} 
 
.content2 { 
 
\t width: 500px; 
 
\t border: 1px solid #000000; 
 
\t margin-bottom: 20px; 
 
\t padding: 10px; 
 
\t background-color:#ffffff; 
 
}

<div class="wrapper1"> 
 
<div class="wrapper2"> 
 
<div class="content1"> 
 
Lorem ipsum dolor sit amet, duo magna persius an. 
 
</div> 
 
<div class="content1"> 
 
Lorem ipsum dolor sit amet, duo magna persius an. 
 
</div> 
 
</div> 
 
<div class="content2"> 
 
Lorem ipsum dolor sit amet, duo magna persius an. Cu adhuc iusto vel, sed ei vidit inciderint. Mel at duis quidam incorrupte, autem omnium ne mei. Ferri iudicabit et eos. Mei ex detraxit atomorum evertitur. 
 
</div> 
 
</div>