29

我有三个 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>

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

4

2 回答 2

76

关键是将你的 html 重组为middle最后一个，float从 中删除middle并将其替换为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;
}
于 2013-03-31T00:01:16.937 回答
3

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

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

这是一个演示

于 2013-03-30T23:41:21.167 回答