Css 媒体查询和2列布局：任意定位

我们刚刚开始按照响应式网页设计+移动优先的理念和指导方针重新设计我们的网站

在特定页面中，我们面临以下情况：在页面的“移动视图”中，我们希望元素按照图像左侧显示的方式排列

这就是为什么在HTML中这些元素声明如下：

<div id="container">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>

A.
B
C
D
E

到目前为止，所有这些都很简单。问题是，使用媒体查询时，为了获得更高的屏幕分辨率，我们需要重新排列图像右侧显示的项目

解决此页面特殊问题的一般问题是：是否可以将任意元素浮动到两列中的每一列，而不必更改两个版本之间的HTML标记？一个纯粹的CSS解决方案是非常理想的

注意：元素的高度未知，宽度为百分比

---

编辑：为了澄清，关于我们的特殊情况，我们需要将项目E附加在项目B下，而不是与D垂直对齐。显示我们不需要的内容。

您能这样做吗

<div id="container">
    <div id="A">A</div>
    <div id="B" class = "left">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>

A.
B
C
D
E
.left{float:left；}

您只需在媒体查询中设置float:left，然后在另一个查询中忽略它

编辑： 为了回应OP的反馈，B和D并没有直接坐在一起，将代码修改为float:right解决了这个问题。即

<div id="container">
    <div id="A" class = "right">A</div>
    <div id="B" >B</div>
    <div id="C" class = "right">C</div>
    <div id="D" class = "right">D</div>
    <div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>

A.
B
C
D
E
.right{float:right；}

您可以将

A

、

C

和

D

浮动到右侧。但是，您可能需要将

溢出：auto

应用于

B

和

E

。还要注意的是，如果

B

高于

A

，

C

将被向下推以相应对齐

---

对于常规布局，您应该这样做。 两个

div

s都应保持浮动状态

<div id="container1">
    <div id="left">
        <div id="B">B</div>
        <div id="E">E</div>
    </div>
    <div id="right">
        <div id="A">A</div>
        <div id="C">C</div>
        <div id="D">D</div>
    </div>
</div>

---

谢谢，但是这种方法的结果是E不附加到B（这是我们想要的），而是与D一致：啊，我明白了。使用float的一个小小的修改：用right代替left可以解决这个问题-这会改变标记，这是违背OP的意愿的。谢谢你的回答！这就是我们要找的。为什么您说我们可能需要对B应用

溢出：auto

？这是为了防止B因其内容而增长超过A吗？@pau.moreno当您使用固定宽度时，忽略此；）（我在考虑流体布局……我的错）

<div id="container2">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>