使用 CSS 更改浮动 div 的顺序答案

【问题标题】：Change order of floated divs with CSS使用 CSS 更改浮动 div 的顺序
【发布时间】：2014-10-31 20:15:04
【问题描述】：

我想改变浮动 div 在特定像素大小的顺序。

在默认状态下，它们都有 50% 的宽度，并且彼此相邻。

低于 600px 的屏幕尺寸（或 w/e 无关紧要）我希望第二个 div（红色的）浮在第一个 div（黄色的）上方。

仅使用 CSS 的解决方案如何实现？

HTML

<div class="yellow"></div>
<div class="red"></div>

CSS

.yellow {
    background: yellow;
    width: 50%;
    height: 300px;
    float:left;
}

.red {
    background: red;
    width: 50%;
    height: 300px;
    float:left;
}

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
    }
}

我想要的解决方案是：

红色分区

黄色分区

但现在是：

黄色分区

红色分区

【问题讨论】：

This 是一种稍微不同的方法，但对 HTML 进行了更改。
不错，但只有当它们都有 50% 的宽度时，您才会得到它们漂浮的“感觉”：向左。我会把每一个的像素都改成固定值。
确实如此。 This 是另一种可能的方法。
你是什么意思'漂浮在第一个之上'？它们应该是显示块，还是红色的 div 应该排在第一位？
这是移动优先的方式，css行数更少jsfiddle.net/mhrf6d4n

标签： html css responsive-design media-queries

【解决方案1】：

尝试改变你的

HTML 到这个 -

<div class="container">
  <div class="yellow"></div>
  <div class="red"></div>
</div>

你的@media 查询 CSS 到这个 -

@media screen and (max-width:600px) {
.container{
    display:flex;
    flex-direction: column-reverse;
}
.yellow {
    background: yellow;
    width: 100%;
    height: 300px;

}

.red {
    background: red;
    width: 100%;
    height: 300px;


} }

【讨论】：

是的。这是纯 CSS 方法的准确答案。

【解决方案2】：

我知道您在问如何使用浮动来完成此操作，但据我所知，使用纯 CSS 这是不可能的（至少不使用讨厌的定位，您说过您不想这样做） .

据我所知，使用纯 HTML/CSS 完成此任务的唯一好方法是使用新的 flexbox spec（一个好的起点可能是 this css tricks article）。

当您使用 flexbox 时，您可以在项目上使用 order 属性来指示哪些订单项目出现在 (duh)

您可以在here 中看到这样的示例，HTML 代码与您所拥有的类似，但添加了一个包装器元素（我还修复了 DOCTYPE 声明）：

<!DOCTYPE html>
<div class="wrapper">
    <div class="yellow">
    </div>
    <div class="red">
    </div>
</div>

CSS 有点不同：

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.yellow {
    background: yellow;
    width: 20%;
    height: 300px;
}

.red {
    background: red;
    width: 20%;
    height: 300px;
}

@media screen and (max-width:600px) {
    .yellow {
        order: 2;
        width: 100%;
    }

    .red {
        order: 1;
        width: 100%;
    }
}

我也对其进行了一些清理，您的媒体查询中有重复的代码，实际上不需要存在。

唯一的缺点是它目前仅适用于撰写本文时大约 80% 的浏览器：

http://caniuse.com/#search=flexbox

根据可能没问题的目标市场，您可以使用优雅降级，以便它在所有方面都正确显示，除了在不完全支持 flexbox 的设备上排序。

我猜你也只是真正针对移动设备重新排序的东西，那里的支持很好，所以它可能对你很有效。

【讨论】：

【解决方案3】：

这是一个使用负边距和浮动的简单解决方案。

对于 CSS，请使用以下内容：

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
        margin-top: 300px;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
        margin-left: -100%;
    }
}

您的 HTML 与您发布的相同。

使用margin-top: 300px 为.yellow 添加上边距（等于红色 div)。

对于红色 div，添加 100% 的负左边距。

这将强制红色 div 将自身定位在黄色 div 之上，但既然你将黄色 div 设置为上边距，黄色 div 会在红色 div 下方弹出。

这个技巧类似于圣杯 3 列布局设计所使用的技巧。

查看演示：http://jsfiddle.net/audetwebdesign/jux84wzk/

【讨论】：

【解决方案4】：

到目前为止，还没有移动优先的答案，即更少的 css 行数和其他好处。 这确实触及了 html，所以这不是 OP 的问题，对于仅 CSS 的方法，它是来自其他两个窥视者的 Flexbox 答案，我已投票赞成。

演示：http://jsfiddle.net/mhrf6d4n/

HTML，按最小视口的源顺序排列：

<div class="red"></div>
<div class="yellow"></div>

CSS（将共享的、全局的放在媒体查询之外的所有视口，组合共享选择器，然后在放置最小宽度并将浮点数放在那里之后）

.yellow, .red {
    background: yellow;
    height: 300px;
}
.red {
    background: red;
}

@media screen and (min-width:600px) {
    .yellow, .red {
        float:left;
        width:50%;
    }
}

【讨论】：

移动优先 CSS 的问题在于，虽然“更好”和“更高效”但它会弄乱 IE8 的样式——（IE8 会忽略媒体查询中的任何 CSS）
respond.js，自 2011 年以来一直在使用它。有时候，您真的不想加载具有大视口样式和巨大背景图像的小视口用户。
有趣，我以前没听说过这个（虽然看起来任何东西都存在 polyfill，所以它确实有意义）。看起来我正在编写我的下一个移动站点首先:) 谢谢！