两个内联块，宽度为 50% 的元素换行到第二行 [重复]答案

【问题标题】：Two inline-block, width 50% elements wrap to second line [duplicate]两个内联块，宽度为 50% 的元素换行到第二行 [重复]
【发布时间】：2011-07-29 10:50:20
【问题描述】：

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

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

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

为什么会这样？

【问题讨论】：

这个问题应该重新打开，因为它不是关于空格的问题的重复。这个问题似乎与如何避免第二个 50% 宽度元素的换行有关。
我猜这个问题现在被锁定了，所以我不能添加另一个答案。最简单的解决方案是在 inline-block 元素上设置font-size: 0，然后为这些元素的内容指定字体大小，例如font-size: 16px。这将删除它们之间的空白。

标签： html css

【解决方案1】：

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

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

【讨论】：

它仍然无法在 IE7 中运行。任何想法如何解决它？目前，我制作了固定高度的元素（它们是两个按钮）并将它们绝对定位，左侧具有right: 50%，右侧具有left: 50%。不是很优雅，但适用于所有浏览器。 ://
@panzi 我下面的建议将解决您的 IE7 问题，并且不会要求您从 HTML 中删除空格，这很痛苦，并且在没有后处理器的情况下很难从动态情况中消除，成本更高CPU 时间可节省边际带宽。
@Replete 是用 JavaScript 生成的，所以很容易防止出现空格。但是，布局发生了变化，因此我无论如何都没有这样的列。
救命稻草，不知道这么瘦。
当您阅读它时听起来很愚蠢......而且它确实有效！太神奇了，在 css3 之后这仍然表现得像这样，因为在我看来这听起来像是一个错误

【解决方案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>

【讨论】：

使用 no-wrap 会使列彼此相邻，但会产生不希望的填充，从而脱离容器。 我下面的建议没有这个问题，这是一个活生生的例子：jsbin.com/openuh/2
@Replete 是我自己还是似乎不适用于 em 中定义的字体大小？
这个解决方案至少在开发模式下有一个更干净的 HTML 更好：D
@PhilRicketts 这种方法不允许您在容器上设置固定高度吗？我试过了，它对孩子也不起作用。
nowrap 看起来不错，但在某些情况下它会中断（不知道为什么，表格单元格中有两个 50% 的 div，使用 nowrap，第二个 div 显示在单元格外）。只需删除 div 之间的空格（根据 tw16 的回答），它就可以工作......

【解决方案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/% 的字体大小调整的基础。

IE7/IE8 特定的 CSS 可以使用 IE 的 Conditional comments 提供服务

【讨论】：

此方法更实用，因为您不能始终控制标记，尤其是在生成标记时。很好的解决方案！
如果标记更改为具有 3 个 div，则此方法无法扩展。 inline-block 保留 2 50% div 的行，而 flex 将它们全部排成一排，使它们更小。但是，我同意这不是 OP 提出的问题中的场景。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

overflow: hidden;

在最后一个元素（或所有元素）上。

【讨论】：