如何使中间的 div 填补浮动元素之间的空间?[英] How make middle div to fill space between floating elements?

本文是小编为大家收集整理的关于如何使中间的 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

本文地址:https://www.itbaoku.cn/post/581650.html