一行中的CSS两个div宽度为50％，文件中有换行符
我尝试使用百分比作为宽度来构buildstream体布局。 这样做，我试过这个：
<div style="width:50%; display:inline-table;">A</div> <div style="width:50%; display:inline-table;">B</div> 在这种情况下，他们不会站在一条线上，但是如果我删除它们之间的换行符，就像这样：
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
那么它工作正常。 哪里有问题？ 我怎么能这样做，但没有使用绝对位置和浮动。
ps对不起英文。 pss我希望我能很好的解释我的问题
问题是，当某些东西在线时，每一个白色皮肤都是一个实际的空间。 所以它会影响元素的宽度。 我build议使用float或display：inline-block。 （只是不要在div之间留下任何空格）。
演示： http : //jsfiddle.net/N9mzE/1/
<div style="width:50%; display: inline-block">A </div><div style="width:50%; display: inline-block;">B </div>
问题是，如果你在HTML中有一条新的行，那么当你使用inline-table或inline-block时候，它们之间会有一个空格
50％+ 50％+空间> 100％，这就是为什么第二个结果低于第一个
解决scheme：
<div></div><div></div>
要么
<div> </div><div> </div>
要么
<div></div><!-- --><div></div>
这个想法是不要在HTML中的第一个closuresdiv标签和第二个打开div标签之间有任何空间。
PS – 我也会使用inline-block而不是inline-table
给这个parent DIV font-size：0 。 这样写：
<div style="font-size:0"> <div style="width:50%; display:inline-table;font-size:15px">A</div> <div style="width:50%; display:inline-table;font-size:15px">B</div> </div>
用下面的CSS把它们包裹在一个div上
.div_wrapper{ white-space: nowrap; }
我怎么能做这样的事情，但不使用绝对位置和浮动？
除了使用inline-block方法（在其他答案中提到）之外，还有其他一些方法：
1）CSS表格（ FIDDLE ）
.container { display: table; width: 100%; } .container div { display: table-cell; }
<div class="container"> <div>A</div> <div>B</div> </div>
<div id="wrapper" style="width: 400px"> <div id="left" style="float: left; width: 200px;">Left</div> <div id="right" style="float: right; width: 200px;">Left</div> <div style="clear: both;"></div> </div>
我知道这个问题想要embedded块，但尝试查看IE 7中的http://jsfiddle.net/N9mzE/1/ （最老的浏览器支持我工作）。 divs不是并排的。
OP表示他不想使用漂浮物，因为他不喜欢漂浮物。 那么…在我看来，制作好的网页在任何浏览器中看起来都不应该是怪异的，你可以通过使用浮动来实现。
老实说，我可以看到这个问题。 漂浮是太棒了。
基本上inline-table是为元素表，我想你在这里真正需要的是inline-block ，如果你必须使用inline-table无论如何，尝试这种方式：
<div style="width:50%; display:inline-table;">A</div><!-- --><div style="width:50%; display:inline-table;">B</div>
对不起，但是我在这里看到的所有答案要么是哈克，要么就是失败，如果你打喷嚏难一点。
如果你使用一个表，你可以（如果你想）在div之间添加一个空格，设置边界，填充…
<table width="100%" cellspacing="0"> <tr> <td style="width:50%;">A</td> <td style="width:50%;">B</td> </tr> </table>
查看更完整的示例： http : //jsfiddle.net/qPduw/5/
将宽度设置为50％时遇到的问题是子像素四舍五入。 如果你的容器的宽度是99像素，50％的宽度可以产生2个容器，每个50像素。
使用float可能是最简单的，而不是一个坏主意。 看到这个问题了解如何解决这个问题的更多细节。
如果你不想使用浮动，尝试使用49％的宽度。 据我所知，这将工作在跨浏览器，但不是像素完美..
HTML：
<div id="a">A</div> <div id="b">B</div>
CSS：
#a, #b { width: 49%; display: inline-block; } #a {background-color: red;} #b {background-color: blue;}
