两个内联块，宽度为50％的元素绕到第二行

Question

我希望有两列宽度为50％的列，并避免出现浮点数。所以我想用display:inline-block。

当元素增加到99％的宽度（例如50％，49％，http：//jsfiddle.net/XCDsu/2/）时，它将按预期工作。

当使用100％的宽度（例如50％，50％，http：//jsfiddle.net/XCDsu/3/）时，第二列会中断到第二行。

这是为什么？

Answer 1

您可以通过删除使用CSS空格空格，这样可以保持你的漂亮的HTML布局。如果您希望文本在列内换行，请不要忘记将空白重新设置为正常。经过IE9，Chrome 18，FF 12的测试.container { white-space: nowrap; }.column { display: inline-block; width: 50%; white-space: normal; }<div class="container">&nbsp; <div class="column">text that can wrap</div>&nbsp; <div class="column">text that can wrap</div></div>