Question

我有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的指令来添加空格。

在容器中等间距div

2 个答案: