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 和 #div2 等子 div 的宽度根据其内容自动设置。

由于使用 inline-block 似乎 line-height 不起作用，我使用 float。

我尝试在#div1 之后添加一个空的clear div，而不是在#div2 中添加一个clear，这样就可以了。

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

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>

如果您不放置第一个<br />，ie6/7 将尝试将第二个 div 放在剩下的小空间中。如果你清除 div，它会将它放在一个新行上，但给它的长度与它仍然在第一个 div 的右侧一样。

在我看来，您的解决方案既好又简单，您可以使用它。否则，这里有两种选择：

备选方案 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>