两个内嵌块,宽度为50%的元素包装到第二行 [英] Two inline-block, width 50% elements wrap to second line
问题描述
我想有两列宽度为50%的空间,并避免浮动。
所以我想用 display:inline-block
。
当元素宽度增加到99% (例如50%,49%, http://jsfiddle.net/XCDsu/2/ )按预期工作。
当使用100%宽度(例如50%,50%, http://jsfiddle.net/XCDsu/3/ )第二列打破第二行。
为什么是这样?
这是因为 display:inline-block
考虑到了html中的空格。如果删除 div
之间的空格,则按预期工作。现场示例: http://jsfiddle.net/XCDsu/4/
< div id =col1>内容< / div>< div id =col2>内容< / 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>
这篇关于两个内嵌块,宽度为50%的元素包装到第二行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!