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

Question

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

在特定页面中，我们面临以下情况：在页面的“移动视图”中，我们希望将元素排列为图像的左侧部分。

这就是为什么在 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>

到目前为止，一切都很简单。问题在于，使用媒体查询时，为了获得更高的屏幕分辨率，我们希望重新排列项目，如图像右侧所示。

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

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

编辑：为澄清起见，对于我们的特殊情况，我们需要将项目 E 附加到项目 B 下，而不是垂直对齐 D。This fiddle 显示我们不想要的.

Answer 1

你能做这样的事吗？

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

你可以在你想要的媒体查询中设置 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>

Answer 2

您可以将A、C 和D 浮动到右侧。但是，您可能需要将overflow:auto 应用于B 和E。另请注意，如果B 高于A，C 将被下推以相应对齐。

Fiddle

Answer 3

对于正常的布局，你应该这样做。 divs 都应该浮动。

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

问题是移动版使用了另一种安排。 因此，一种解决方案是为移动页面制作另一个版本并隐藏#container1（其他网站反之亦然）。

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