Html 如何通过浏览器使两个div在同一条直线上具有相同的高度

例如，这是我的页面布局

++++++++++++++++++++++++++
+       +  div2 +       +
+ div1   +     +       +
+       +       + div3  +
+       +++++++++       +
+       +       +       +
+       +       +++++++++
+       +               +
++++++++++++++++++++++++++

如图所示，div1、div2和div3在同一条线上

<div id="container" style="width:100%;min-height:500px;">
    <div id="div1" style="float:left;width:19%;height:100%"></div>
    <div id="div2" style="float:left;width:1%;height:100%">
       <img src="toggle.gif" /></div>
    <div id="div3" style="float:left;width:80%;height:100%"></div>
</div>

但它们的高度不同，因为它们的内容不同

甚至我设置了它们的父元素的最小高度，并将它们的高度设置为100%

我认为div#container的高度必须大于500px

而且三个div的高度都是100%，所以它们至少需要500px

但似乎我错了。我想知道发生了什么事

BWT，在div2内部只有一个用于切换div1的图标（使用jquery），但是当div1隐藏时，div3也只占浏览器窗口的80%，如何使div2和div3占据整个窗口

---

我知道我可以使用jquery设置它们的大小，但我想知道这是否可以通过浏览器实现？

尝试添加

最小高度：500px到div1、div2等。在父容器上设置的最小高度属性并不意味着内部的div最后也会有500像素。
当您使用float属性设置div1、div2、div3时，以最高的为准将确定容器div的高度

使用是解决此问题的一种方法。
当您以%指定浮动时，浮动不会基于其父项的高度计算其高度。所以你的100%不是指父母的身高。
您可能应该使用
position:absolute；排名：0；底部：0而不是
浮动：左；身高100%
唯一的问题是，父对象（在您的情况下是
容器
）不会随着其任何子对象的身高而增长。然后，您应该指定
容器的高度
，或者使其任何子列不
位置：abosute
。
试试这个：

<div id="container" style="width:100%;height:500px;position:relative;">
<div id="div1" style="background:blue; position:absolute; top:0; bottom:0; width: 19%;"></div>
<div id="div2" style="background:red; position:absolute; top:0; bottom:0; width: 1%; left: 19%;">
   <img src="toggle.gif" /></div>
<div id="div3" style="background:green; position:absolute; top:0; bottom:0; width:80%; left:20%;"></div>



jsiddle:
不太正确，只有当容器具有
溢出：隐藏时，您的第一个语句才为真。否则，在这种情况下，容器的高度为零（除非设置了
min height
或
height
）。