調整身體漂浮物的最小高度爲包含不止一個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>