Layout CSS3：在第二个和第三个div之间浮动第一个div

这应该是一个简单的解决方案：

我的div按以下顺序排列：

<div id="middle"></div>
<div id="right"></div>
<div id="left"></div>

---

我必须把它们按这个顺序排列。使用浮动，如何使第一个div（

“middle”

）位于第二个div之间

每个div都有一个设置的高度和宽度（以px为单位）

我试过做

float:left在中间：

[[中]右][左]

然后
float：右：

[左[[中]右]]]

但它显示为

[中][左][右]

有什么帮助吗

编辑：这是当前源：


你可以这样写：

div{
display:inline-block;
}
#left{
 float:left;
}
#right{
 float:right;
}

选中此项
如果设置了宽度和高度，请使用css属性：

position:absolute;

和玩：

left: 100px; /* width of the div on the left */

如果您确实能够添加一个wrapper div元素，那么（就您的简单示例而言）可以在以下位置工作：

给定以下HTML：

<div id="wrap">
    <div id="middle">middle</div>
    <div id="right">right</div>
</div>
<div id="left">left</div>​​​​​​​​​​​​​​​​​​

.
假设某些抓取工具必须按照这样的顺序抓取代码，那么为什么不在页面加载后添加一些JavaScript来对其进行洗牌呢。
很久以后，为了好玩：
将所有3个div都放在另一侧，这样将具有文本对齐中心属性（仅适用于中间div），并让左侧和右侧div浮动


.group{
文本对齐：居中；
}
#左{
显示：内联块；
浮动：左；
}
#对{
显示：内联块；
浮动：对；
}
#中间的{
显示：内联块；
}

[左]
[中]
[对]
“我必须按这种顺序排列，”那就不容易了。你能再添加一些div作为包装吗？@DavidThomas-我想：P@bažmegakapa-是的，很好。添加了当前使用的源代码。不，不起作用。中柱在顶部。如果我做了
.left
。和
。对
对于第二/第三类，顶级div只保留自己的行。哦，等等，就是这样！我没有拿出中间柱子上的浮子
<div id="wrap">
    <div id="middle">middle</div>
    <div id="right">right</div>
</div>
<div id="left">left</div>​​​​​​​​​​​​​​​​​​

var middle = document.getElementById('middle'),
    left = document.getElementById('left');

middle.parentNode.insertBefore(middle,left.nextSibling);​