css - 在哥哥姐姐之前 float 一个div

Question

是否可以让一个 float 元素在它的 sibling 之前 float ？

例如想象三个 float 的 div:

A B C

我希望它们显示为:

A C B

我不想更改 html 标记，因为这是响应式设计。在特定的断点处，我希望 float 的顺序和布局发生变化。

我一直在阅读有关 :after 和 :before 的内容，但我不确定这是否对我有帮助。

.myFloat{
    width:75px;
    height:75px;
    margin:10px;
    border:1pc solid #333;
    float:left;
}

这是我的 fiddle :http://jsfiddle.net/ewfMT/

Answer 1

尽情享受吧! http://jsfiddle.net/ewfMT/1/

.myFloat{
    width:75px;
    height:75px;
    margin:10px;
    border:1pc solid #333;
    float:left;
}
.myFloat:nth-child(2) {
    float:none;
    display:inline-block;
}

这是为什么起作用的基本描述:float:left 将获取一个元素并将其堆叠到元素的左侧，而 display:inline-block 自然会从左到右流动，但在所有 float:left 元素的右侧。