Html 两个行内块，宽度为 50% 的元素换行到第二行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6871996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two inline-block, width 50% elements wrap to second line
提问by Dan Milon
I would like to have two columns of 50% width space, and avoid floats.
So i thought using display:inline-block.
我想要两列 50% 宽度的空间，并避免浮动。所以我想使用display:inline-block.
When the elements add to 99% width (eg 50%, 49%, http://jsfiddle.net/XCDsu/2/) it works as expected.
当元素添加到 99% 宽度（例如 50%、49%、http://jsfiddle.net/XCDsu/2/）时，它会按预期工作。
When using 100% width (eg 50%, 50%, http://jsfiddle.net/XCDsu/3/) the second column breaks to the second line.
当使用 100% 宽度（例如 50%, 50%, http://jsfiddle.net/XCDsu/3/）时，第二列会中断到第二行。
Why is that?
这是为什么？
回答by tw16
It is because display:inline-blocktakes 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/
这是因为display:inline-block考虑了 html 中的空白。如果删除div's之间的空格，它会按预期工作。现场示例：http: //jsfiddle.net/XCDsu/4/
<div id="col1">content</div><div id="col2">content</div>
回答by Adam
You can remove the whitespaces via css using white-spaceso you can keep your pretty HTML layout. Don't forget to set the white-space back to normal again if you want your text to wrap inside the columns.
您可以使用white-space通过 css 删除空格，这样您就可以保持漂亮的 HTML 布局。如果您希望文本在列内换行，请不要忘记再次将空白设置为正常。
Tested in IE9, Chrome 18, FF 12
在 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>
回答by Phil Ricketts
NOTE:In 2016, you can probably use
flexboxto solve this problem easier.
注意：在 2016 年，您可能可以使用
flexbox更轻松地解决此问题。
This method works correctly IE7+ and all major browsers, it's been tried and tested in a number of complex viewport-based web applications.
这种方法在 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>
Live demo: http://output.jsbin.com/sekeco/2
现场演示：http: //output.jsbin.com/sekeco/2
The only downside to this method for IE7/8, is relying on body {font-size:??px}as basis for em/%-based font-sizing.
这种方法对于 IE7/8 的唯一缺点是依赖body {font-size:??px}作为基于 em/% 字体大小的基础。
IE7/IE8 specific CSS could be served using IE's Conditional comments
可以使用 IE 的条件注释提供 IE7/IE8 特定的 CSS
回答by thirtydot
inlineand inline-blockelements are affected by whitespace in the HTML.
inline和inline-block元素受 HTML 中的空白影响。
The simplest way to fix your problem is to remove the whitespace between </div>and <div id="col2">, see: http://jsfiddle.net/XCDsu/15/
解决您的问题，最简单的方法是删除空格之间</div>和<div id="col2">，请参阅：http://jsfiddle.net/XCDsu/15/
There are other possible solutions, see: bikeshedding CSS3 property alternative?
还有其他可能的解决方案，请参阅：bikeshedding CSS3 属性替代？
回答by Autonomy
I continued to have this problem in ie7 when the browser was at certain widths. Turns out older browsers round the pixel value up if the percentage result isn't a whole number. To solve this you can try setting
当浏览器处于特定宽度时，我在 ie7 中继续遇到此问题。如果百分比结果不是整数，旧浏览器会将像素值向上舍入。要解决此问题，您可以尝试设置
overflow: hidden;
on the last element (or all of them).
在最后一个元素（或所有元素）上。
