＆＃39;动态＆＃39;图像重叠而不是水平地显示

Question

我试图并排显示图像，但显示彼此的顶部。我有一个div，我将img标签附加到使用angularJS，我不确定它是否因为它们是单独附加的，因此在彼此之间或如果它因为我的CSS而分层。

我通过这个附加到div：

for(var i = 0;i < data.list.length;i++) 
        {
            $scope.HTML = $sce.trustAsHtml('<img id="images"  src="http://localhost:8080/images/'+data.list[i]+'"/>');
        }

HtML中的div本身如下：

<div id="section" ng-bind-html="HTML">
</div>

然后我的css看起来像这样：

#section {
    width:90%;
    height:35%;
    margin:auto;
    min-width:600px;
    max-width:2000px
    padding:2px;
    border-style: solid;
    border-width: medium;
    border-color: grey;
    border-radius: 25px;
}

#images{
    height: 75%;
    display: inline;
    float:auto;
    margin: auto;
}

所以我拥有的是： 我想做什么： 我认为这是显而易见的：内联;会使这并排，但我没有。 任何帮助都会得到赞赏。

Answer 1

我认为你正在为〜循环迭代改变{每次$scope.HTML的值。

试试这个：

$scope.HTML = [];
for(var i = 0;i < data.list.length;i++) 
    {
        $scope.HTML.push("http://localhost:8080/images/"+data.list[i]);
    }

在你看来：

<div id="section" ng-repeat="img in HTML">
    <img class="images" ng-src="{{img}}"/>
</div>

注意：您的images应该是CSS类而不是id

编辑：对于每个div没有img：

<div id="section">
    <img ng-repeat="img in HTML" class="images" ng-src="{{img}}"/>
</div>