Question

是否有可能在其兄弟姐妹之前浮动元素？

例如想象三个浮动的div：

A B C

我希望它们显示为：

A C B

我不想更改html标记，因为这是一个响应式设计。在特定的断点处，我想要浮点数的顺序，从而改变布局。

我一直在阅读：之前和之后，但我不确定这是否会对我有帮助。

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

这是我的小提琴：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个元素。

Answer 2

查看flexbox模型。您可以在那里重新排序元素。请参阅http://css-tricks.com/snippets/css/a-guide-to-flexbox/。

Answer 3

如何使用Javascript和AJAX（或Jquery）动态更改div的内容，具体取决于您希望在其中包含哪些内容。

因此即使订单仍然是A B C - A现在真的有B的内容，或者你想要的任何内容。

所以你可能会做一些这样的javascript

<script>
target = document.getElementById('A');  // this assumes the target div has an ID of "A"
target.innerHTML = "whatever content you want to put in here"
</script>

在老兄弟之前漂浮div

3 个答案: