Question

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

我按以下顺序排列了div：

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

我必须按此顺序拥有它们。使用浮点数，如何让第一个div（"middle"）落在第二个div之间。

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

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

[[middle] right] [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 Fiddle demo

Answer 3

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

position:absolute;

并玩：

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

Answer 4

很久很高兴：将所有3个div倒在另一侧，而不是具有text-align-center属性（仅适用于中间div），并让左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来改变它们。

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

5 个答案: