0

我在大豆模板中有一些 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 规则只是添加了一个假的最后一行，因为 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 命令中（if、for 等），如下所示：

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

a、b、c 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>

a、b、c div 将继续默认向左。在内联行的剩余空间中，1、2、3 个 div 将非常合理：

在此处输入图像描述

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

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

另一点——所有其他文本对齐值都有效。如果我将 justify 更改为 text-align:center，所有六个 div 将很好地放在中心。相同的文本对齐：左/右/等..

关于模板和证明是如何计算/编译的，有什么我不理解的吗？闭包命令会产生某种隐藏的隐藏周围 div 吗？

4

1 回答 1

0

发现：

  • text-align:justify 对空格敏感
  • 大豆模板在编译时不一定关心空格

基本上，这不起作用：

<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>
于 2017-10-20T23:39:41.980 回答