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

Pit*_*kos 26 html css3 css-float

我有三个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>
Run Code Online (Sandbox Code Playgroud)

关于如何做到这一点的任何想法?我尝试了不同的解决方案,但没有设法做我想要的.

Sco*_*ttS 74

关键是要调整你的HTML有middle最后,除去floatmiddle替换为overflow: hidden.

查看小提琴示例.

HTML

<div id="left"  >  left   </div>
<div id="right" >  right  </div>
<div id="middle">  middle </div>
Run Code Online (Sandbox Code Playgroud)

CSS

#left {
    width: 200px;
    float: left;
}
#middle {
    overflow: hidden;
}
#right {
    width: 200px;
    float: right;
}
Run Code Online (Sandbox Code Playgroud)