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> 緊挨着的, 結果致使了沒法失效預期的效果, 花了數個小時調試找緣由。