两个内联块，宽度为50％的元素包装到第二行
我想有两列50％的宽度空间，并避免浮动。 所以我想用display:inline-block 。
当元素添加到99％宽度（例如50％，49％， http：//jsfiddle.net/XCDsu/2/ ）时，它按预期工作。
当使用100％宽度（例如50％，50％， http://jsfiddle.net/XCDsu/3/ ）时，第二列突破第二行。
这是为什么？
这是因为display:inline-block在html中考虑了空格。 如果您删除了div之间的空格， div预期工作。 现场示例： http : //jsfiddle.net/XCDsu/4/
<div id="col1">content</div><div id="col2">content</div>
你可以通过css使用空格来删除空格，这样你就可以保留漂亮的HTML布局。 如果您希望将文本包裹在列中，请不要忘记将空格再次设置为正常。
testingIE9，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>
注意：在2016年，您可能可以使用
flexbox更容易地解决此问题。
这种方法正常工作的IE7 +和所有主stream浏览器，它已经在一些复杂的基于视口的Web应用程序中尝试和testing。
<style> .container { font-size:0} .column { display: inline-block; width: 50%; font-size:1rem; /* IE9+ */ } .ie7 .column {font-size:16px; display:inline; zoom:1} .ie8 .column {font-size:16px} </style> <div class="container"> <div class="column">text that can wrap</div> <div class="column">text that can wrap</div> </div>
现场演示： http : //output.jsbin.com/sekeco/2
IE7 / 8的这种方法的唯一缺点是依赖于body {font-size:??px}作为基于em /％的字体大小的基础。
IE7 / IE8特定的CSS可以使用IE的条件注释
inline和inline-block元素受HTML中的空格影响。
解决问题最简单的方法是删除</div>和<div id="col2">之间的空格，请参阅： http : //jsfiddle.net/XCDsu/15/
还有其他可能的解决scheme，请参阅： bikeshedding CSS3属性替代？
当浏览器在一定宽度时，我仍然在ie7中遇到这个问题。 如果百分比结果不是整数，则表示旧的浏览器向上舍入像素值。 要解决这个问题，你可以尝试设置
overflow: hidden;
在最后一个元素（或者全部）上。
