Question

我无法弄清楚如何编辑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>

Answer 1

Foundation Docs for 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没有任何经验，所以我不知道你怎么能让最后一个元素变得不同，但我认为有办法做到这一点，希望这会给你一个良好的开端。

Answer 2

特拉维斯对这个问题很有兴趣。

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

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

Answer 3

我会做像

这样的事情

p img {
    float:right;
}

Answer 4

使用ng-class

<div ng-repeat="(photo_id, photo) in photos"
     class="large-4 columns"
     ng-class="{'end': $last}">

如何确保基础CSS网格块加载左中右？

4 个答案: