html - 容器中的等间距div

Question

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

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

Angular 输出:

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

也许其他人可以解释为什么这样做有效，但在您的 fiddle 中重复 span 元素但内部有 box 类使得两个实现看起来相同。