Html 将两个div相邻对齐，并将其下的第三个div对齐

如何将两个div并排放置，并将第三个放置在其下方？像这样：

我目前的代码如下：

HTML:

---

您可以使用Flexbox

#容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
#货柜组{
填充：20px；
边框：1px纯黑；
利润率：10px；
}
.div-1、.div-3{
弹性：110；
}
.div-2{
弹性：100%；
顺序：3；
}

第一组
第2组
第3组

您可以使用Flexbox

#容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
#货柜组{
填充：20px；
边框：1px纯黑；
利润率：10px；
}
.div-1、.div-3{
弹性：110；
}
.div-2{
弹性：100%；
顺序：3；
}

第一组
第2组
第3组

您当前的编码结果是什么？@ott-现在我在div3上有很大的空间。我试着用边距顶部来缩小间距，但随着第3部分内容的变化，间距会变小。为什么不改变第二部分的顺序，以便第二部分可以正确地断到下一行呢？也就是说，如果你可以有固定的高度，你可以用绝对定位来完成。。。但你可能不想这样。小提琴手：你目前的编码结果是什么？@ott-现在我在div3上面有很大的空间。我试着用边距顶部来缩小间距，但随着第3部分内容的变化，间距会变小。为什么不改变第二部分的顺序，以便第二部分可以正确地断到下一行呢？也就是说，如果你可以有固定的高度，你可以用绝对定位来完成。。。但你可能不想这样。Fiddle：谢谢，它工作得很好，但是没有flexbox也可以实现吗？如果您希望元素的顺序是

1,3,2

，我认为flexbox是目前为止最好的解决方案。如果不是的话，我建议你使用bootstrap来获得这个布局，它将是响应性的。谢谢，它工作得很好，但是没有flexbox也可以实现吗？如果你想要元素按这个顺序排列，我认为flexbox是目前为止最好的解决方案。如果不是的话，我建议您使用引导来获得布局，它将是响应性的。

<div id="container">
    <div class="div-1">div1</div>
    <div class="div-2">div2</div>
    <div class="div-3">div3</div>
</div>

#container {
     position: absolute;
}

.div-1 {
     float: left;
     width: 45%;
     padding: 2%;
}

.div-2 {
     clear: both;
}

.div-3 {
     float: right;
     width: 45%;
     padding: 2%;
}