DIV之间的空白会干扰布局

问题描述

| 假设我有以下HTML / CSS，具有两列DIV，每列50像素宽。

<div style=\"width:100px;margin:0px;\">
    <div style=\"width:50px; display:inline-block;\">A</div><!-- HERE -->
    <div style=\"width:50px; display:inline-block;\">B</div>
</div>

在这段代码中，如果我在两个内部div之间没有空格（即

<!-- HERE -->

在哪里）：

<div style=\"...\">
    <div style=\"...\"></div><div style=\"...\"></div>
</div>

然后，按预期在两列中呈现HTML。但是，如果我之间有任何空格，它们不会并排呈现，因为空格字符占用的宽度非零。 明显的解决方案是在内部DIV之间没有任何空格，但是，我使用HTML自动格式化程序来格式化我的HTML代码，并且它自动在两个内部DIV之间插入空格。 有什么解决办法，以便即使两个内部DIV之间有空格，也可以按预期方式呈现它们？     

解决方法

将

white-space:nowrap; word-spacing:0;

加到

100px container

。 没有

floats

，

positioning

等。

<div style=\"width:100px;margin:0px;white-space:nowrap; word-spacing:0;\">
    <div style=\"width:50px; display:inline-block;background:#efefef;\">A a</div><!-- HERE --><div style=\"width:50px; display:inline-block;background:#ccc;\">B b</div>
</div>

这是小提琴：http://jsfiddle.net/3yQ6L/2/     ,关于什么

div style=\"width:100px;margin:0px;\">
<div style=\"width:50px; display:inline-block;\">A</div><!-- 
--><div style=\"width:50px; display:inline-block;\">B</div>

或者如果您使用的是php等

    div style=\"width:100px;margin:0px;\">
<div style=\"width:50px; display:inline-block;\">A</div><? /*
*/ ?><div style=\"width:50px; display:inline-block;\">B</div>

不知道是否有帮助     ,您可以浮动内部div并向外部添加

overflow: hidden

：

<div style=\"width:100px;margin:0px;overflow:hidden;\">
    <div style=\"width:50px; float: left;\">A</div>
    <div style=\"width:50px; float: left;\">B</div>
</div>

http://jsfiddle.net/ambiguous/3yQ6L/1/     ,内联块的行为类似于图像或文本字符，因此它们之间的间隔将取决于字体大小。 您可以尝试将它们向左浮动，也可以尝试将字体大小设置得很小。您还可以在第二个框上尝试使用负的左边距。