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

Question

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

我有以下顺序的div：

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

我必须按这个顺序排列它们。使用浮点数，我怎样才能让第一个 div ( "middle") 落在第二个 div 之间。

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

我试过float:left;在中间做：

[[中] 右] [左]

然后float:right;在顶部集群上：

[左[[中]右]]]

但它显示为

[中][左][右]

有什么帮助吗？

编辑：这是当前来源：

http://pastebin.com/sjiw9PLn

http://pastebin.com/NMsWk1nZ

Answer 1

你可以这样写：

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

检查这个http://jsfiddle.net/8amez/

Answer 2

如果您确实能够添加包装器 div 元素，那么这在JS Fiddle有效（就您的简单示例而言） ：

​#left {
    float: left;
}

​#wrap {
    width: 80%;
    float: right;
}

​#wrap #middle {
    float: left;
}

#wrap #right {
    float: right;
}​

给定以下 HTML：

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

但请记住，这可能相当脆弱；并且可以通过重新排序标记来更好地实现，或者，如果不能在服务器端或在 HTML 中更改，则使用 JavaScript 移动内容，例如：

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

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

JS 小提琴演示。

Answer 3

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

position:absolute;

和玩：

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

Answer 4

很久以后为了乐趣：将所有 3 个 div 都放在另一个旁边，而不是有一个 text-align-center 属性（仅适用于中间 div），并让左右 div 浮动作为回答。

.group{
   text-align:center;
}

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

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

#middle{
 display:inline-block;

}

<div class="group">
  <div id="left">[left]</div>
  <div id="middle">[middle]</div>
  <div id="right">[right]</div>
</div>

Answer 5

假设某些抓取工具必须按照这个顺序来抓取依赖于它的代码，为什么不在页面加载后添加一些 JavaScript 来随机播放它们。