2016-12-16 21 views
0

我在我的一個角度html文件中有下面的代碼。我正嘗試在旋轉木馬中使用ng-repeat將div元素彼此相鄰。使用ng-repeat時理解角度佈局

這是我到目前爲止所做的。

<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 

有人可以幫助我在這方面瞭解的佈局。

+0

這可能是CSS問題。 – SaiUnique

回答

1

這不是角這是關於CSS,你可以嘗試:

.item{ 
    width: 100% 
}  
.message{ 

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

Online Demo