调整身体漂浮物的最小高度为包含不止一个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> 

我想让它这样内容2是在最小的相同的高度wrapper2，其高度与内容的变化。试图增加和减少填充和边距，但最终content2伸展到wrapper1的底部。我想让content2在第二个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>