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在第二个content1框的底部结束。

Answer 1

您可以使用flex执行此操作。默认情况下，flex父级的子级将显示在一行中stretch以填充父级的高度。

.wrapper1 {
	width: 700px;
	border: 1px solid #000000;
	padding: 20px;
  display: flex;
}
.wrapper2 {
	width: 150px;
}
.content1 {
	width: 100px;
	border: 1px solid #000000;
	margin-bottom: 20px;
	padding: 10px;
	background-color:#ffffff;
}
.content2 {
	width: 500px;
	border: 1px solid #000000;
	margin-bottom: 20px;
	padding: 10px;
	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>

将车身浮子的最小高度调整为包含多个div的导航浮动

1 个答案: