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

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

您可以通过删除使用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的条件注释来提供IE7/IE8特定的CSS

Answer 4

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

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

还有其他可能的解决方案,请参阅:bikesheding CSS3属性替代方案？