本文是小编为大家收集整理的关于如何使中间的 div 填补浮动元素之间的空间？的处理方法，想解了如何使中间的 div 填补浮动元素之间的空间？的问题怎么解决？如何使中间的 div 填补浮动元素之间的空间？问题的解决办法？那么可以参考本文帮助大家快速定位并解决问题。
问题描述
我有三个div元素:左，中和右. 左右固定并漂浮.我想要的是中间div，以填补它们之间的空白.
这是我的代码:
<!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>
关于如何执行此操作的任何想法?我尝试了不同的解决方案，但没有设法做我想做的事情.
推荐答案
关键是将您的html重组为middle最后，从float和 overflow: hidden .
html
<div id="left" > left </div> <div id="right" > right </div> <div id="middle"> middle </div>
CSS
#left {
width: 200px;
float: left;
}
#middle {
overflow: hidden;
}
#right {
width: 200px;
float: right;
}
其他推荐答案
我能够复制问题并使用百分比而不是绝对值来解决问题.由于您正在寻找两个要素之间的灵活的东西.
#left {
width: 20%;
float: left;
background: #ccc;
}
#middle {
width: 60%;
float: left;
display: block;
background: #ddd;
}
#right {
width: 20%;
float: right;
background: #bbb;
}
这是 demo
相关问答
更多相关问答相关标签/搜索