Question

我在父组件的for循环中渲染子组件。我的父组件应该浮动到屏幕底部，然后在每个子组件渲染后渲染到我的父组件

父组件：

<div class="row">
  <div class="content">
    <div class="row">
        <div class="col-md-12" id="ng-chat-view">
        <div class="col-md-3">
          <div id="ng-chat-people" [ngClass]="{'ng-chat-people-collapsed':isCollapsed}">
            <a href="javascript:void(0);" class="ng-chat-title shadowed" (click)="onChatTitleClicked($event)">
              <span>
                Farmer List
              </span>
            </a>
            <input *ngIf="!isCollapsed" id="ng-chat-search_friend" type="search" placeholder="Search" [(ngModel)]="search" (ngModelChange)="getFarmerBySearchVal(search)"
            />
            <ul id="ng-chat-users" *ngIf="!isCollapsed">
              <li *ngFor="let user of farmers">
                <div *ngIf="!user.imageUrl" class="icon-wrapper">
                  <i class="user-icon"></i>
                </div>

                <img *ngIf="user.imageUrl" alt="" class="avatar" height="30" width="30"  src="{{user.imageUrl}}"/>
                <strong title="{{user.user}}" (click)="openChatWindow(user, true)">{{user.name}}</strong>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-9 m-l">
          <div *ngFor="let user of userInfo; let i = index">
            <div>
              <app-chatwindow [userInfo]="user" (onWindowCloseNotify)="onWindowCloseDeleteUserFromList($event)"></app-chatwindow>
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我附上了所需输出的屏幕截图：父组件应该是：

子组件应该是：

当前输出：

Answer 1

考虑这个例子。父母应该向右和儿童一起漂浮。

＆＃13;

.chat {
  float: right;
  list-style: none;
}

.chat li {
  width: 160px;
  height: 200px;
  background: red;
  float: right; 
  margin-left: 10px;
}

＆＃13;

<ul class="chat">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

＆＃13;

如何从左到右显示子组件

1 个答案: