3个内嵌块div,正好宽度为33%,不适合父级

Question

这是一个常见的问题,但我无法弄清楚它为什么会发生.

我有一个父div,在div里面我有3个div,宽度设置为33%(确切地说,不是33.3%!)和display: inline-block.

在Chrome中它运行良好,但在Mozilla和Opera中它没有(我还没有在IE中测试它).我认为问题可能出在算法浏览器用于从百分比计算像素大小的算法中.但是当我检查DOM指标时,我发现父亲的宽度是864px而孩子的宽度是285px(这是正确的:864*.33 = 285.12).但为什么它不适合父母呢？285*3 = 855,比父母的宽度小9px!

哦,是的,所有div的填充,边距和边框设置为0,DOM指标确认.

Answer 1

HTML源代码中的空格

在HTML源代码中,当您有文本或图像行或元素时inline-block,如果它们之间有任何空格(空格,制表符或新行),则在它们之间将添加一个空格字符.页面呈现.例如,在以下HTML中,四个内容中的每一个之间都会出现一个空格:

one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>

这对于文本行以及出现在文本行内的小图像或HTML元素非常有用.但是当inline-block用于布局目的时,它成为一个问题,而不是在文本段落中添加内容的方式.

删除额外的空间

最安全的,跨浏览器的方式,以避免额外的4像素左右的那间增加的太空inline-block元素,是消除任何空白的HTML标签之间的HTML源代码.

例如,如果您有ul3个浮动li标记:

<-- No space, tabs, or line breaks between </li> and <li> -->
<ul>
    <li>...</li><li>...</li><li>...</li>   
</ul>

不幸的是,这会损害网站的可维护性.除了使代码不可读之外,它还严重损害了数据和格式的分离.

如果另一个程序员稍后出现并决定将每个li标记放在源代码中的单独行上(不知道为什么标记在同一行上,或者可能通过HTML Tidy运行它,甚至没有机会注意到任何相关的HTML评论),网站突然有一个格式错误,可能很难识别.

请考虑使用浮动元素

空白行为强烈表明,inline-block用于一般布局目的可能不适合用于除了在文本段的流内添加内容之外的任何其他内容.

此外,在某些情况下,inline-block内容很难完全样式化和对齐,尤其是在旧版浏览器上.

其他解决方案的快速摘要

1. 将close标记放在与下一个打开标记相同的行上,它们之间没有空格.
2. 使用HTML注释填充close标记和下一个打开标记之间的所有空格(如@Arbel建议的那样).
3. 为每个元素添加负左边距(通常为-3px或-4px,基于字体大小).我不推荐这种特殊方法.
4. 将font-size容器元素设置为0或0.01em.这在Safari 5中不起作用(不确定更高版本),它可能会干扰响应式设计网站,或任何使用font-size除以外单位的网站px.
5. 使用JavaScript或jQuery从容器中删除仅空白文本节点.这并不在IE8和更早,因为文本节点没有在这些浏览器中创建时只有元素之间的空白,虽然空间的元件之间仍然增加.
6. 设置letter-spacing和word-spacing容器(如@PhillipWills建议).进一步的信息.这需要em在网站上标准化尺寸,这可能不是所有网站的合理选择.
7. 添加text-space-collapse: discard;到容器(以前称为white-space-collapse).不幸的是,任何浏览器都不支持这种CSS3风格,并且标准尚未完全定义.

Answer 2

如果您不想弄乱HTML格式,例如将所有元素inline-block写在一行中以便将来阅读,并且还要消除它们之间添加的额外空白区域,您可以"注释"空白区域.

例如,在您的代码中,这将解决问题,它甚至可以使用33.3%而不是33%:

.parent {
    width: 100%;
 }
.child{
    display: inline-block;
    width: 33.3%;
}

/ \

<div class="parent">
       <div class="child">bla-bla1</div><!-- 
    --><div class="child">bla-bla2</div><!-- 
    --><div class="child">bla-bla3</div>
</div>