Question

我想有两列50％宽度的空间，并避免浮动。所以我想使用display:inline-block。

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

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

为什么？

Answer 1

这是因为display:inline-block考虑了html中的空格。如果删除div之间的空格，则按预期工作。实例：http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

Answer 2

您可以使用 white-space 通过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>

Answer 3

注意： 2016年，您可以使用flexbox来更轻松地解决此问题。

此方法可以正常使用IE7 +和所有主流浏览器，它已经在许多复杂的基于视口的Web应用程序中进行了尝试和测试。

<style>
    .container {
        font-size: 0;
    }

    .ie7 .column {
        font-size: 16px; 
        display: inline; 
        zoom: 1;
    }

    .ie8 .column {
        font-size:16px;
    }

    .ie9_and_newer .column { 
        display: inline-block; 
        width: 50%; 
        font-size: 1rem;
    }
</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 /％的字体大小的基础。

可以使用IE的Conditional comments

来提供IE7 / IE8特定的CSS

Answer 4

inline和inline-block元素受HTML中的空格影响。

解决问题的最简单方法是删除</div>和<div id="col2">之间的空格，请参阅：http://jsfiddle.net/XCDsu/15/

还有其他可能的解决方案，请参阅：bikeshedding CSS3 property alternative?

Answer 5

当浏览器处于某个宽度时，我继续在ie7中遇到此问题。如果百分比结果不是整数，则将旧的浏览器舍入像素值。要解决此问题，您可以尝试设置

overflow: hidden;

关于最后一个元素（或所有元素）。

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

5 个答案: