inline-block text-align: justify 实现自适应布局, 当子inline-block之间没有空格时失效及原因

  对于一个父container 可以设置其text-align: justify 使得其内部的文本自动两端对齐, 基于这个特性把内部的子标签设置为inline-block就能实现内部的子dom自动两端对齐。

  

<style>
  .father{
    position: absolute;

    left: 100px;
    top: 100px;
    width: 200px;

    /* 注意这里font-size为0 消除了white-space的宽度 */
    font-size: 0;

    /* 子标签设置inline-block 配合justify 实现自适应 */
    text-align: justify;
    border: 1px solid red;
  }

  /* 这样人工的创造一个换行 */
  .father::after{
    content: ' ';

    width: 100%;
    display: inline-block;
  }

  .father .child{
    display: inline-block;

    font-size: 10pt;
    border: 1px solid blue;
  }
</style>

<div class="father">
  <div class="child">子1</div>
  <div class="child">子2</div>
  <div class="child">子3</div>
  <div class="child">子4</div>
</div>

 

但是如果我们改变html的代码, 改成这样

<div class="father">
  <div class="child">子1</div><div class="child">子2</div><div class="child">子3</div><div class="child">子4</div>
</div>

就会发现原本均匀分布的子dom 现在全部挤到左边去了, text-align: justify 失效了。查阅css相关规范text-align: justify 默认情况下是通过调整 inline-box 之间的 white-space 的宽度, 即通过对 white-space 的拉伸或压缩实现两端对齐, 这里的white-space实际上是广义的, html 在解释源文件中的 回车 换行 \t 空格(连续的1~n)的时候都是按照一个 white-space 来渲染的, 所以当上面html中的 .child 之间没有任何这类型字符的时候, 没有white-space来用于调整, text-align: justify 失效!

找到的一个规范文档: http://www.w3school.com.cn/tiy/c.asp?f=css_text-justify&p=7 当中机制其实比较复杂, white-space的处理还受到 css white-space 的影响, 上文中探讨的是默认情况下的表现

后记:

  因为在用angular2开发的时候, 使用了*ngFor指令, 并且我希望能用 inline-box 和 text-align: justify 去实现内联盒子的自动两端对齐, 结果因为*ngFor生成出来的html, 子标签之间是没有其他符号像: <div></div><div></div><div></div><div></div> 紧挨着的, 结果导致了无法失效预期的效果, 花了数个小时调试找原因。