把一个正确的浮动和一个浮动的浮动隔开
我有一个页面，头部由三个div组成 – 一个漂浮在左边，一个漂浮在右边，一个在它们之间。 我想要中央的div被集中，但可悲float: center不存在，我不能只漂浮到左边，并添加填充，因为它必须改变，取决于窗口的大小。
有没有简单的我可以忽略？ 或者我会怎么做这样的事情呢？
更新：
此外，我想find一种方法，将中间div 放在 div 之间的空间中，以防看起来更好。
如果你有两个浮动div，那么你知道的利润。 问题是float:right div应放在中间div之前。 所以基本上你会有：
左浮动| 右浮动| 中心
现在，关于利润率：通常你可以使用margin:0 auto ，对吧？ 问题是，现在你知道边际的价值：浮动的divs！ 所以你只需要使用：
margin:0 right-floated-width 0 left-floated-width
这应该工作。
多年后编辑
同时，一个新的玩具在城里：flexbox。 支持是相当不错的 （即如果你不需要支持低于IE 10）和易用性是浮动方式。
你可以在这里看到一个很好的Flexbox指南。 你需要的例子就在这里 。
事实上，重要的一点是中间的div在标记的左边和右边的div之后。 看看这个例子，它使用margin-left: auto和margin-right: auto在居中的div上，这会导致它居中。
<html> <head> <style type="text/css"> #left { float: left; border: solid 1px red; } #mid { margin-left: auto; margin-right: auto; border: solid 1px red; } #right { float: right; border: solid 1px red; } </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> <div id="mid"> mid </div> </body> </html>
这是一个JS Bin来testing： http : //jsbin.com/agewes/1/edit
具有居中内容的元素需要在两个浮动元素之后指定。 之后，只需将中间元素设置为text-align: center 。 居中元素中的文本将挤在浮游物之间。
看到这里： http : //jsfiddle.net/calvintennant/wjjeR/
通常你可以使用flexbox而不是float：
https://jsfiddle.net/h0zaf4Lp/
HTML：
<div class="container"> <div>left</div> <div class="center">center</div> <div>right</div> </div>
CSS：
.container { display: flex; } .center { flex-grow: 1; }
试试这个（确保使用更好的类名）：
.left { float:left; width:200px; } .right{ float:right; width:200px; } .center { overflow:hidden; zoom:1; }
中心div将适合这两个浮游物。
如果你想创build一个居中的div和两个浮动之间的水槽，然后使用浮动边缘，而不是在中心div。
由于“缩放”，CSS将无法validation，但是该布局将在IE 5.5和6中工作。
请注意，源顺序在这里很重要：两个浮动必须先来，然后你的“居中”的div。
在某些情况下，您有一个限制，并且不能通过在右浮动div之后移动中间div来更改页面标记。 在这种情况下，请按照以下说明操作
- 对于容器：
position: relative - 对于中间格：
position: absolute; left: [containerWidth - middle-width / 2]position: absolute; left: [containerWidth - middle-width / 2]
我希望你明白了。
一个简单的解决scheme，而不必改变div的顺序（有时我们不能这样做）可能是一个绝对定位的中心分区如下：
.container { position: relative; } .container div { width: 200px; background: red; } .left { float: left; } .right { float: right; } .center { position: absolute; top: 0; left: 0; right: 0; margin: auto; }
<div class="container"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div>
