Странное поведение с использованием команд Closure и "text-align:justify"

Question

У меня есть несколько элементов div в шаблоне Soy, которые я хочу разместить равномерно по горизонтали.

Вот что работает:

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 просто добавляет поддельную последнюю строку, так как justify не будет применяться к последней строке.

HTML (в шаблоне сои):

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

Та-да! Вот как это выглядит (для большей ясности добавлена ​​граница):

JSFiddle демонстрирует это: http://jsfiddle.net/ULQwf/1257/

Вот проблема:

Если я вставлю div в какие-либо команды Closure (если, 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>

Div, a, b, c будут продолжать по умолчанию влево. В оставшемся месте во встроенном ряду, 1, 2, 3 деления будут хорошо оправданы:

Если я переверну порядок и сначала поставлю регулярные элементы div, а затем вторые элементы Closure, то результат будет очень похожим, но a, b, c будут объединены справа, а не слева.

---

Просматривая Инструменты разработчика на Chrome, каждый div - a, b, c, 1, 2, 3 - выглядит точно так же. Те же вычисленные значения.

Еще один момент - все остальные значения выравнивания текста работают. Если я изменю justify на text-align:center, все шесть делителей будут хорошо сидеть вместе в центре. То же самое для выравнивания текста: слева / справа / и т. Д.

Есть ли что-то в том, как шаблоны и justify вычисляются / компилируются, что я не понимаю? Создают ли команды закрытия какой-то секретный скрытый окружающий div?

Answer 1

Открытия:

• выравнивание текста: выравнивание чувствительно к пробелам
• Соевые шаблоны не обязательно заботятся о пробелах при компиляции

В принципе, это не работает:

<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>