3

这是我的例子：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问题：流体宽度与等距DIV

4

2 回答 2

3

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

 <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 类使得两个实现看起来一样。

于 2013-02-28T16:46:43.783 回答
1

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

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

我相信 ng-repeat 不会在它的输出之间放置任何空格，所以所有的 div 都是相互对立的，从而导致了问题。

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

于 2013-02-28T18:44:13.497 回答