How do I build left-right-right CSS CSS base blocks?

Question

I can't figure out how to edit the Foundation stylesheet so that dynamically added blocks shown in the attached image load from left to right. They are currently loading the right-left center. Any help is appreciated. Image: 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 say ...

To work around the various rounding actions of browsers, Foundation will float the last column in a row to the right to align the edge. If your row does not have a counter that contains up to 12 columns, you can mark the last column with an end class to override this behavior.

For instance:

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

In your case, Angular automatically repeats your div elements with this line:

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

I have no experience with Angular, so I don’t know how you could make the last element different, but I assume there is a way to do this, and I hope this gives you a good start.

Answer 2

Travis was in place with a problem.

Your solution might be to add an end class to each column.

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

Answer 3

I would do something like

 p img { float:right; } 

Answer 4

Use ng-class

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