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

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

html css

Html 如何使中间div填充浮动元素之间的空间？,html,css,css-float,Html,Css,Css Float,我有三个div元素：左、中、右。左侧和右侧是固定和浮动的。我想要的是中间的div来填补它们之间的空白这是我的代码： <!DOCTYPE html> <html> <head> <style> * {border: dotted 1px red;} #left { width: 200px; float: left; } #middle {

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


*{边框：点1px红色；}
#左{
宽度：200px；
浮动：左；
}
#中间的{
浮动：左；
}
#对{
宽度：200px；
浮动：对；
}
左边
中间的
正确的

有什么办法吗？我尝试了不同的解决方案，但没有做到我想要的。

我能够复制这个问题，并使用百分比而不是绝对值来解决它。由于您希望在这两个元素之间找到一些灵活的东西，所以这应该是可行的

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

这里有一个

关键是重新构造html，使其具有

middle

最后，从

middle

中删除

float

，然后

HTML

<div id="left"  >  left   </div>
<div id="right" >  right  </div>
<div id="middle">  middle </div>

您是否尝试过从

px

转换为百分比？谢谢。这是可行的，但我想知道是否有一种方法可以固定左右两个div的大小。哟，你的链接断了。这篇文章不可能还在，是吗？还有，巴林和优雅的回答。太夸张了。@Thomas刚刚找到了一个网页存档，并交换了链接。如果你想让“左”和“右”元素“包装”内容（像Android），那么“左”和“右”在渲染过程中会消耗尽可能多的空间，而“中”则会占用其余的空间？因此，在不预先定义两个边元素的宽度的情况下？@ktamas看起来好像是这样，但很明显，如果您获得了太多的内容，那么根据

浮动的性质，

它会和。@ScottS谢谢，但是是的。。这对我来说还不够好：）右div的底部应该和左的底部对齐，所以左应该一直到右的左侧。我将尝试在显示方面做一些魔术：表格/表格单元格和flex。不过还是要谢谢你：）

#left {
    width: 200px;
    float: left;
}
#middle {
    overflow: hidden;
}
#right {
    width: 200px;
    float: right;
}