Within a Soy template, I have some divs that need to be evenly spaced horizontally.
Working Solution:
CSS (simplified for example):
.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;
}
The ::after rule adds a faux last line to enable justification.
HTML (in the soy template):
<div class="list-of-things">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Here is what it looks like with added border solidity:
https://i.sstatic.net/PosAt.png
JSFiddle demonstrating this: http://jsfiddle.net/ULQwf/1257/
Issue Encountered:
If I place the divs inside Closure commands, like below:
{if true}
<div>a</div>
<div>b</div>
<div>c</div>
{/if}
The div behavior defaults to left alignment as shown here:
https://i.sstatic.net/V76Ma.png
Furthermore, when combining all div types inside the same parent div:
<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>
The closure divs remain unaligned while others are justified:
https://i.sstatic.net/hqJDy.png
Inspecting in Chrome's Developer Tools shows no discernible differences between the div elements involved.
Changing align properties to other values works fine. Only justifying fails in accordance with closure blocks. Is there a hidden enclosing div produced by closures?