涉及Closure命令和“text-align：justify”的奇怪行为

Question

我在Soy模板中有一些div，我想在水平方向上均匀分布。

以下是工作原理：

CSS（此示例简化了命名法）：

.list-of-things {
  position: relative;
  text-align: justify;
}

.list-of-things::after {
  display: inline-block;
  width: 100%;
  content: '';
}

.list-of-things div {
  display: inline-block;
  height: 25px;
  weight: 25px;
}

:: after规则只会添加一个伪造的最后一行，因为对齐不适用于最后一行。

HTML（在大豆模板中）：

<div class="list-of-things">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

钽哒！这就是它的样子（添加边界可靠性，使其更清晰）：

JSFiddle证明了这一点：http://jsfiddle.net/ULQwf/1257/

以下是问题：

如果我将div放在任何Closure命令（if，for等）中，如下所示：

{if true}
  <div>a</div>
  <div>b</div>
  <div>c</div>
{/if}

a，b，c divs将全部落入默认的内联块行为，在左侧。看起来像这样：

即使更奇怪，如果我把所有东西混在一起，就像这样：

<div class="list-of-things">
  {if true}
    <div>a</div>
    <div>b</div>
    <div>c</div>
  {/if}
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

a，b，c divs将继续默认为左侧。在内联行的剩余空间中，1,2,3个div将很好地对齐：

如果我颠倒顺序并将常规div放在第一位，然后将Closure放在第二位，那么结果非常相似，但a，b，c将在右边而不是左边集中在一起。

浏览Chrome上的开发者工具，每个div - a，b，c，1,2,3 - 看起来完全相同。相同的计算值。

另一点 - 所有其他文本对齐值都有效。如果我将对齐更改为text-align：center，则所有六个div将在中心很好地坐在一起。对于text-align：left / right / etc ..

有什么关于如何计算/编译模板和合理的东西，我不理解？封闭命令会产生某种秘密隐藏的div吗？

Answer 1

发现：

• text-align：justify is whitespace-senstive
• 大豆模板在编译时不一定关心空白

基本上，这不起作用：

<div>
  {if true}
    <div>a</div>
    <div>b</div>
    <div>c</div>
  {/if}
</div>

但是这样做了！

<div>
  {if true}
    <div>a</div>{sp}
    <div>b</div>{sp}
    <div>c</div>{sp}
  {/if}
</div>