两个行内块，宽度为50% 的元素包装到第二行

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

当元素添加到99% 的宽度(例如50% ，49% ，http://jsfiddle.net/XCDsu/2/) ，它工作正常。

当使用100% 的宽度(例如50% ，50% ，http://jsfiddle.net/XCDsu/3/)第二列中断到第二行。

为什么？

138569 次浏览
小开
最佳答案

这是因为 display:inline-block考虑了 html 中的空白。如果你删除的白色空间之间的 div的，它的工作正如所期望的。实例: http://jsfiddle.net/XCDsu/4/

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

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

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

还有其他可能的解决方案，参见: 自行车保护 CSS3房地产的另一种选择？

小开

你可以使用 空白处通过 css 删除空白，这样你就可以保持你漂亮的 HTML 布局。如果希望文本在列内换行，不要忘记将空白再次设置为正常。

在 IE9，Chrome18，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 + 和所有主流浏览器中都能正常工作，已经在许多复杂的基于视图的 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 的 有条件的评论来服务

小开

在 ie7中，当浏览器处于一定宽度时，这个问题仍然存在。如果百分比结果不是一个完整的数字，那么旧版浏览器的像素值就会上升。要解决这个问题，您可以尝试设置

overflow: hidden;

关于最后一个元素(或所有元素)。


提交答案