IE6/7 div 清除时浮动没有宽度问题（在固定宽度的父 div 中）

Question

HTML:

<div id="container">
  <div id="div1">div one floats to the left</div>
  <div id="div2">div two floats to the left</div>
</div>

CSS:

#container{ width:200px; background:gray; }
#div1 { float:left; background:red;}
#div2 { float:left; background:green; clear:left;}

在 IE6/7 中:

注释：

我想要像 #div1 这样的子 div 的宽度和 #div2 根据其内容自动。

由于使用 inline-block 时，行高似乎不起作用，因此我使用浮动。

我尝试在 #div1 之后添加一个空的清除 div，而不是在 #div2 中添加清除，这有效。

还有其他更简单的解决方案吗？有什么错误？感谢您的帮助。

Answer 1

按照你的解决方案...

简单地不要清除浮动div，你告诉它浮动但也被清除。有点令人困惑！

<style>
    #container{ width:200px; background:gray;}
    #div1 { float:left; background:red;}
    #div2 { float:left; background:green; }
</style>


<div id="container">
  <div id="div1">div one floats to the left</div>
  <br style="clear:left" />
  <div id="div2">div two floats to the left</div>
  <br style="clear:left" />
</div>

如果您不放置第一个
，ie6/7 将尝试将第二个 div 放入剩下的小空间中。如果清除该 div，它会将其放在新行上，但为其提供相同的长度，就好像它仍在第一个 div 的右侧一样。

我认为你的解决方案很好而且很简单，你可以采用它。否则，这里有 2 个替代方案：

替代方案 1

内联块有效...如果您使用非块元素开始（不确定确切原因）。

<style>
    #container{ width:200px; background:gray;}
    #div1 {  background:red; display:inline-block; line-height:30px;}
    #div2 { background:green; display:inline-block;width:auto; }
</style>
<div id="container">
  <span id="div1">div1</span>
  <span id="div2">div2 doesnt float blablabla</span>
</div>

替代方案 2

使用表格（不太好，但仍然有效！）

<style>
    #container{ width:200px; background:gray;}
    #div1 {  background:red;}
    #div2 { background:green; }
</style>
<div id="container">
  <table><tr><td id="div1">div one floats to the left</td></tr></table>
  <table><tr><td id="div2">div two floats to the left</td></tr></table>
</div>