一行中的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-tableinline-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;}