Bild ausrichten nach links in angularjs html

Question

Sie können Reihen im Bild sehen.

Dies ist Code dieser Ansicht:

<div layout="row" layout-align="space-around center" > 
<product-image-thumbnail layout="row" layout-align="left center" 
    src="vm.callFunction(field)" 
    setter="vm.callFunction(value)" /> 

<md-button ng-click="vm.onMouseOver(field.getSrc))" layout="row" layout-align="right center"> 
    <md-icon>zoom_in</md-icon> 
</md-button> 
</div> 

Ich mag rechtes Bild oder uploadanimage nach links, Zoom-Taste auszurichten.

Aber es funktioniert nicht.

ich versuchte auch

layout-align="start start 
layout-align="end end" 

aber es hat den Job nicht machen.

Auch ich habe versucht, Tasten zu column konvertieren, aber es ist das gleiche.

es macht zwei Zeilen, wenn ich nicht das erste Layout setzen. Ich brauche sie in einer Reihe.

das ist, wo src Bild

<div ng-show="!vm.src" layout="row"> 
    <md-button class="md-button md-ink-ripple" ng-click="vm.Dialog($event)"> 
     <md-icon>file_upload</md-icon> 
     <span translate>upload_image</span> 
    </md-button> 
</div> 
<div ng-show="vm.src" class="thumbnail" layout="column" layout-align="center center" flex layout-padding ng-click="vm.Dialog($event)"> 
    <img src="{{vm.src}}" style="max-height: 60px;max-width: 60px" 
     error-src="content/images/no_image_icon.gif" 
    /> 
</div> 

Answer 1

<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="left"> This is some text.</p>

Answer 2

kommt Wenn Sie Winkel Material verwenden möchten, versuchen, den Raum dazwischen param verwenden. Example Plunker.

<div><!-- shouldn't need layout here--> 
    <img layout="row" layout-align="space-between center" /> 
    <button layout="row" layout-align="space-between center">Zoom</button> 
</div> 

Answer 3

Sie können auf diese Weise versuchen,

<section layout="row" layout-align="end center" layout-wrap> 
    <div layout="row" layout-align="start center" flex> 
     <img src="https://echtemaaltijd.blob.core.windows.net/image/image_671ed3d3-0c1e-43d5-9e9a-86247556fd00" class="md-card-image" alt="Washed Out"> 
     <span flex></span> 
    </div> 
    <md-button class="md-warn">Type</md-button> 
    </section> 

DEMO

Answer 4

Versuchen Sie dies mit Flex!

<div layout="row" layout-alignment="stretch"> 
    <product-image-thumbnail flex 
     src="vm.callFunction(field)" 
     setter="vm.callFunction(value)" /> 

    <md-button ng-click="vm.onMouseOver(field.getSrc))" flex="5"> 
     <md-icon>zoom_in</md-icon> 
    </md-button> 
</div> 

Die flex wird so viel Platz in Anspruch nehmen, wie es bis 95% der verfügbaren Breite und flex=5 wird dafür sorgen, es ist 5 $