两个内联块，宽度为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">

  <div class="column">text that can wrap</div>

  <div class="column">text that can wrap</div>

</div>