Html 如何使中间 div 填充浮动元素之间的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15724700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How make middle div to fill space between floating elements?
提问by Pithikos
I have three div elements: left, middle and right. Left and right are fixed and floating. What I want is the middle div to fill the gapin between them.
我有三个 div 元素：左、中和右。左右是固定和浮动的。我想要的是中间的 div 来填补它们之间的空白。
This is my code:
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<style>
* {border: dotted 1px red;}
#left {
width: 200px;
float: left;
}
#middle {
float: left;
}
#right {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="left" > left </div>
<div id="middle"> middle </div>
<div id="right" > right </div>
</body>
</html>
Any ideas on how to do this? I tried different solutions but didn't manage to do what I want.
关于如何做到这一点的任何想法？我尝试了不同的解决方案，但没有设法做我想做的事。
回答by ScottS
The key is to restructure your html to have middlelast, remove the floatfrom the middleand replace it with overflow: hidden.
关键是调整你的HTML有middle最后，除去float从middle和替换为overflow: hidden。
HTML
HTML
<div id="left" > left </div>
<div id="right" > right </div>
<div id="middle"> middle </div>
CSS
CSS
#left {
width: 200px;
float: left;
}
#middle {
overflow: hidden;
}
#right {
width: 200px;
float: right;
}
回答by djthoms
I was able to replicate the issue and fix it using percentages instead of absolute values. Since you are looking for something flexible between the two elements this should work.
我能够复制这个问题并使用百分比而不是绝对值来修复它。由于您正在寻找两个元素之间灵活的东西，因此这应该可行。
#left {
width: 20%;
float: left;
background: #ccc;
}
#middle {
width: 60%;
float: left;
display: block;
background: #ddd;
}
#right {
width: 20%;
float: right;
background: #bbb;
}
Here's a demo
这是一个演示
