css - 两个内联块，宽度50％的元素不堆叠 [英] css - two inline-block, width 50% elements don't stack

问题描述

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

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

使用100％宽度（例如50％，50％， http：//

为什么？

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

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

I would like to have two columns of 50% width space, and avoid floats. So i thought using display:inline-block.

When the elements add to 99% width (eg 50%, 49%, http://jsfiddle.net/XCDsu/2/ ) it works as expected.

When using 100% width (eg 50%, 50%, http://jsfiddle.net/XCDsu/3/ ) the second column breaks to the second line.

Why is that?

解决方案

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

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

这篇关于css - 两个内联块，宽度50％的元素不堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！