html - 使用 css 重新排列 HTML 元素

Question

我的布局中有如下三个元素:

<div id="container">
    <div id="element1"/>
    <div id="element2"/>
    <div id="element3"/>
</div>

这样显示:

| element1 | element2 | element3 |

我希望他们这样显示:

element1 | element2
element3 |

我最接近的事情是:

element1 |
element3 | element2

我无法对齐 element1 和 element2

有人知道如何仅使用 CSS 来实现吗？

Answer 1

这是工作示例

<div id="container">
    <div id="element1" class="boxes">
    This is elem1
    </div>
    <div id="element2" class="boxes">
    This is the elem2
    </div>
    <div id="element3">
    This is elem3
    </div>
</div>

<style>
    .boxes{
        border:1px solid black;
        box-sizing:border-box;
        width:50%;
        float:left;
    }
</style>