Question

我有三个div元素：left，middle和right。左右是固定和浮动的。我想要的是中间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>

关于如何做到这一点的任何想法？我尝试了不同的解决方案，但没有设法做我想做的事。

Answer 1

关键是重新构建您的html，使其持续middle，从float和replace it with overflow: hidden移除middle。

View fiddle example.

<强> 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;
}

Answer 2

我能够复制问题并使用百分比而不是绝对值来修复它。由于您正在寻找两个元素之间的灵活性，这应该有效。

#left {
    width: 20%;
    float: left;
    background: #ccc;
}
#middle {
    width: 60%;
    float: left;
    display: block;
    background: #ddd;
}
#right {
    width: 20%;
    float: right;
    background: #bbb;
}

这是demo

如何使中间div填充浮动元素之间的空间？

2 个答案: