使用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

这是工作示例

resultArray

Answer 2

你的问题非常开放（没有任何背景），这是一个非常简单的解决方案，即使用float: left ......

＆＃13;

＆＃13;

#element1, #element2, #element3 {
  float: left;
  width: 50%;
  box-sizing: border-box; // <- Not necessary for this basic example unless you add padding, etc.
}

＆＃13;

<div id="container">
    <div id="element1">El 1</div>
    <div id="element2">El 2</div>
    <div id="element3">El 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你不能只使用CSS，因为CSS不能为你必须使用jQuery进行真正的DOM修改。

我希望此链接可以帮助您：

What is the easiest way to order a <UL>/<OL> in jQuery?

Answer 4

将它们全部定义为float: left并将clear: both添加到第三个。