我有两个并排的 div(div1 和 div2),我想在 div2 下放置第三个 div (div3)。
我已经尝试向 div3 添加边距以尝试将其对齐,但 div1 宽度是动态的。我也尝试过将 div3 向右浮动,但是内容太远并且没有像上图那样与 div2 的开头对齐
.row {
display: flex;
}
.div1 {
margin-right: 1em;
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
默认行为是 div3 在 div1 之下。我试图将 div3 放在 div 2 下面
最佳答案
您可以通过以下方式做到这一点:
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.div {
flex-basis: 50%;
min-height: 100px;
}
.div1 {
background: red;
}
.div2 {
background: blue;
}
.div3 {
background: aqua;
}
<div class="wrapper">
<div class="div div1">div1</div>
<div class="div div2">div2</div>
<div class="div div3">div3</div>
</div>
这是一个 codepan
关于html - 我怎样才能并排放置两个div,第三个div与第二个对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58153825/