anglejsの画像を左に揃えるhtml

Question

画像内の行を見ることができます。

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

私は左から右へ、ズームボタンに画像やuploadanimageを整列する：

これは、そのビューのコードです。

しかし、それは動作しません。

私も

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

を試してみましたが、それは仕事をしませんでした。

また、私はcolumnに変換するボタンを試しましたが、それは同じです。

最初のレイアウトを入れないと2行になります。私はそれらを一列にする必要があります。

のsrcイメージが

<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

を出番これは、あなたが角度材料を使用する場合は、スペース間のparamを使用してみてくださいです。 DEMO

Answer 3

あなたがこの方法を試すことができ、

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

はフレックスでこれを試してみてください！それは95可能な幅の％とflex=5までそれがあることを確認しますすることができますよう

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

flexは、できるだけ多くのスペースを取るだろう5 $

Answer 4

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>