使用NG Repeat angularJS格式化CSS图像

CSS image formatting with NG-Repeat angularJS

本文关键字：CSS 图像 格式化 angularJS NG Repeat 使用      更新时间：2024-04-20

我正在尝试格式化我的angularJS图像，这些图像填充了html，我一直在尝试将图像放在一起，以便显示4个图像，然后它转到一行新的行上，以便它们显示在4行中，但当代码来自angular时，它似乎不喜欢它。这是我的html:

<span ng-repeat="x in r.selectedImageUri">
    <div style="width:25%;position:inline-block;">
         <img ng-src="{{x}}" width="100%" alt="image" style="">
         <div><button class="button button-assertive" style="width:100%;">Deletee</button></div>
    </div>          
 </span>

这里还有一张的屏幕截图

屏幕截图

有人能帮忙吗？谢谢

您需要使用display: inline-block而不是position

style="width:25%;position:inline-block;"

style="width:25%;display:inline-block;"

width="100%" alt="image" style=""

style="width:100%" alt="image"

<div class="row">
                <span ng-repeat="x in r.selectedImageUri">
                <div style="width:100%;">
                     <div class="col">
                    <img ng-src="{{x}}" width="100%" style="max-width:200px;" alt="image" style="">
                    <div><button class="button button-assertive" style="width:100%;">Deletee</button></div>
                    </div>
                </div>
                </span>
                </div>
相关文章：