如何確保基礎CSS網格塊加載左中心右？

我無法弄清楚如何編輯基礎樣式表，使附加圖片中顯示的動態添加塊從左到右加載。目前，他們加載右中心。任何幫助大大讚賞。圖片：http://i.stack.imgur.com/Arqy8.jpg 如何確保基礎CSS網格塊加載左中心右？

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

來源

2013-06-24 Robert Maxwell

我會做類似

p img { 
    float:right; 
}

來源

2013-06-24 19:13:39 Vector

的Foundation Docs for Grid說...

爲了解決瀏覽器的不同的舍入行爲，基金會將浮在最後在右邊連續放置一列，使邊緣對齊。如果你的行沒有一個加起來爲12列的計數，你可以用最後一列標記最後一列來覆蓋那個行爲。

例如：

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

我沒有與任何角度經驗，所以我不：

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

在你的情況，角度自動與該行重複你的div元素不知道如何讓最後一個元素不同，但我認爲有一種方法可以做到這一點，並希望這給你一個良好的開端。

來源

2014-02-07 16:55:49 Travis

特拉維斯發現問題。

您的解決方案可以將end類添加到每列。

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

來源

2014-05-29 01:47:50 davidmdem

使用ng-class

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

來源

2016-01-27 00:28:04 aaaaahaaaaa

如何確保基礎CSS網格塊加載左中心右？

回答

相關問題