javascript - 使用 ng-repeat 时了解 Angular 布局

Question

我的一个 Angular html 文件中有以下代码。我试图在轮播中使用 ng-repeat 使 div 元素彼此相邻。

这是我到目前为止所做的。

<div class="carousel-inner" role="listbox">

            <div class="item active" layout="row">
                <div class="message" flex=33
                    ng-repeat="message in messages.images " layout-align="start end"
                     ng-if="$index > 0 && $index < 3">
                    <span class="video-message-name">{{message.text}}</span>
                </div>
            </div>
            <div class="item" layout="row">
                <div class="message" flex=33
                    ng-repeat="message in messages.images " layout-align="start end"
                     ng-if="$index > 2 && $index < 6">
                    <span class="video-message-name">{{message.text}}</span>
                </div>
            </div>

            <div class="item" layout="row">
                <div class="message" flex=33
                    ng-repeat="message in messages.images " layout-align="start end"
                    ng-if="$index > 6 && $index < 9">
                    <span class="video-message-name">{{message.text}}</span>
                </div>
            </div>


        </div>

这里的问题是我希望 div 看起来像这样

message 1    message 2    message 3

但它即将到来

message 1

message 2

message 3

有人可以帮助我理解这种情况下的布局吗？

Answer 1

这不是关于 Angular 的，这是关于 CSS 的，你可以尝试一下:

.item{
    width: 100%
}    
.message{

    float:left;
    display: inline-block;
    width: 33%
 }

<强> Online Demo