html – 即使两个浮动物品的宽度都不够,我怎样才能确保两个浮动物品并排放置？

我有以下 HTML：

<div  >
  <div >
    <div style="float: left;">
      <input type="checkBox" value="False" />
    </div>
    <div style="float: left;" >         XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
  </div>
</div>

它会显示复选框右侧的XXX.但是,如果我缩小屏幕宽度,则XXX会进入复选框.

有什么方法可以“锁定”DIV内的XXX文本,这样XXXX总是出现在右边和同一行吗？

(注意我想继续使用DIV,因为我在DIV上做一些jQuery事情.)

解决方法

如果你希望它们总是在同一行上,你可以合理地将两个div组合成一个仍然浮动的div,并使用white-space属性将它保持在一行：

<div>
  <div>
    <div style="float:left; white-space:Nowrap;">
      <input type="checkBox" value="false" />         XXXXXXXXXXXXXXXXXXXXXXX 
    </div>
  </div>
</div>

Starx的答案很好地解释了为什么使用两个独立的浮动div来实现这一点并不可行.

编辑：http://jsfiddle.net/nkorth/qQSCV/