4

我不知道如何编辑 Foundation 样式表，以便在所附图片中显示的动态添加的块从左到右加载。目前，它们加载左右中心。非常感谢任何帮助。图片：http: //i.stack.imgur.com/Arqy8.jpg

    <div ng-repeat="(photo_id, photo) in photos" class="large-4 columns">
    <row>
        <div class="panel" data-photo-id="{{photo_id}}">

            <p>
                <img ng-src="{{photo.image_url}}" width="350" height="300"/>
            </p>
                <ul class="small-block-grid-4">
                    <li><button class="tiny button" onclick="#">Sleep</button></li>
                    <li><button class="tiny button" ng-click="setIgnore(photo_id)">Ignore</button></li>
                    <li><button class="tiny button" onclick="alert({{photo.camera_id}})">Info</button></li>
                    <li><button class="tiny alert button" ng-click="setAlert(photo_id)">Alert</button></li>
                </ul>
        </div>
    </row>
</div>
4

4 回答 4

1

Grid的基金会文档说……

为了解决浏览器的不同舍入行为，Foundation 会将一行中的最后一列向右浮动，以便边缘对齐。如果您的行没有最多 12 列的计数，您可以使用 end 类标记最后一列以覆盖该行为。

例如：

<div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
</div>
<div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns end">3 end</div>
</div>

在您的情况下，Angular 会自动div使用此行重复您的元素：

<div ng-repeat="(photo_id, photo) in photos" class="large-4 columns">

我对 Angular 没有任何经验，所以我不知道如何让最后一个元素变得不同，但我认为有办法做到这一点，希望这能给你一个好的开始。

于 2014-02-07T16:55:49.723 回答
1

特拉维斯对这个问题很了解。

您的解决方案可以是将end类添加到每一列。

<div ng-repeat="(photo_id, photo) in photos" class="large-4 columns end">
于 2014-05-29T01:47:50.213 回答
0

我会做类似的事情

p img {
    float:right;
}
于 2013-06-24T19:13:39.893 回答
0

利用ng-class

<div ng-repeat="(photo_id, photo) in photos"
     class="large-4 columns"
     ng-class="{'end': $last}">
于 2016-01-27T00:28:04.117 回答