IE6 / 7 divs浮动时没有宽度问题（在固定宽度的父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的宽度根据其内容自动生成。

由于使用内联块，行高似乎不起作用，我使用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>