容器中的等间距div

Question

这是我的例子：http://jsfiddle.net/rtCP3/62/

我有 3 个（或更多！）div 我想在一个容器中平均分配空间。当使用带有 ng-repeat 的角度时，样式不会被拾取。当我硬编码完全相同的元素时，它工作得很好。

角度输出：

<div class="container ng-scope" ng-controller="ParentCtrl">
     <!-- ngRepeat: item in list -->
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item1</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item2</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item3</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item4</div>
     <span class="stretch"></span>
</div>

硬编码：

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <span class="stretch"></span>
</div>

我基于这个 stackoverflow 问题：Fluid width with equally spaced DIVs

Answer 1

这行得通。我不知道为什么，但它的空间是一样的：

 <div class="container" ng-controller="ParentCtrl">
     <span data-ng-repeat="item in list">
         <div class="box">{{ item.name }}</div>
     </span>
     <span class="stretch"></span>
 </div>

也许其他人可以解释为什么会这样，但是在你的小提琴中重复 span 元素但里面有 box 类使得两个实现看起来一样。

Answer 2

您引用的 SO 问题中的评论说

我花了 3 小时才发现 html 中的每个框之间应该有空格。 'Justify' 扩展元素之间的空格，如果您的内容是 <div/><div/><div/>，则它不起作用。你需要有<div/> <div/> <div/>。

我相信 ng-repeat 不会在其输出之间放置任何空格，因此所有的 div 都彼此正对着，从而导致了问题。

您可以创建自己的类似 ng-repeat 的指令来添加空格。