Question

我想更改某个像素大小的浮动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;
    }
}

我想要的解决方案是：

RED DIV

YELLOW DIV

但现在是：

YELLOW DIV

RED DIV

Answer 1

我知道您正在询问如何使用花车来实现这一目标，但据我所知，使用纯CSS这是不可能的（至少没有使用令人讨厌的定位，你已经说过你不喜欢＆＃39 ; t想做）。

据我所知，使用纯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的设备上进行排序外，它能以各种方式正确显示。

我猜你也只是真正针对移动设备进行重新排序，支持很好，所以它可能适合你。

Answer 2

尝试更改

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;


} }

Answer 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与发布的内容相同。

使用.yellow向margin-top: 300px添加上边距（等于。{1}}的高度红色div。。

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

这将强制红色div将自己定位在黄色div上，但是因为你将黄色div设为上边距，黄色div在红色div下弹出。

这个技巧类似于用于Holy Grail 3列布局设计的技巧。

请参阅演示：http://jsfiddle.net/audetwebdesign/jux84wzk/

Answer 4

到目前为止，没有移动的第一个答案，即较少的css行和其他好处。 这确实触及了html ，所以它不是OP的问题，对于CSS唯一的方法，Flexbox的答案来自另外两个窥视，我投了票起来。

DEMO：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更改浮动div的顺序

4 个答案: