将3个div并排对齐，使一个列具有2个

Question

我总共有3个div - 如何让它们按照下图显示。

我可以使用float：left一起得到2，但是第3个人一直坐在div A下面。

有什么想法吗？

由于

Answer 1

查看masonry.js。

在这种情况下不能使用浮动的原因是浮动将在行中最高的元素之后清除，因此在元素A下撞击元素C.

或者，您可以将A放在浮动到左侧的子父级中，将子级中的B和C放在右侧。然而，这使得难以响应响应/流体布局中的项目的顺序。解决方案可简化如下：

<div>
    <div class="col">
        <!-- A -->
    </div>
    <div class="col">
        <!-- B + C -->
    </div>
</div>

---

对于CSS：

.col { float: left; width 50%; }

Answer 2

将B和C包裹在类似于A的附加div中（同时还有浮动）