Question

我需要在Ionic 1列表卡视图中显示两行数据，但我无法实现此目的。我使用了两个div来添加两行，但它不起作用。

<div class="row row-responsive">
<div class="col">
    <div class="row row-responsive item item-divider">
        <div class="col " align="center">
            Last Name
        </div>
        <div class="col " align="center">
            First Name
        </div>
        <div class="col " align="center">
            Middle Name
        </div>
        <div class="col " align="center">
            Address 
        </div>
        <div class="col " align="center">
            Age
        </div>
        <div class="col " align="center">
            City
        </div>
        <div class="col " align="center">
            State
        </div>
    </div>

    <div class="row row-responsive item list card cardBase" ng-repeat="item in myList">
        <div class = "row row-responsive">
            <div class="col item-Overflow" align="center">
                {{item.LName}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.FName}}
            </div>
            <div class="col  item-Overflow" align="center">
                {{item.MName}}
            </div>
            <div class="col  item-Overflow" align="center">
                {{item.Address}}
            </div>
        </div>
        <div class = "row row-responsive">
            <div class="col item-Overflow" align="center">
                {{item.Age}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.City}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.State}}
            </div>
        </div>
    </div>
</div>

其中cardBase类是

.cardBase {
  margin: 15px 0;
  padding: 16px;
  width: 100%;
  height: 150px;
  resize: none;
}

执行此操作后，数据仍显示在一行中。请帮我以下列格式显示数据

Answer 1

这很简单：

  <ion-content>

    <div class="card">

      <div class="row">
        <div class="col">John</div>
        <div class="col">Dev</div>
        <div class="col">Peter</div>
        <div class="col">Washington, DC</div>
      </div>

      <div class="row">
        <div class="col">23 Years</div>
        <div class="col">Tucson</div>
        <div class="col">USA</div>
      </div>

    </div>

  </ion-content>

查看ionic grids了解更多信息。

离子1卡片视图显示两行

1 个答案: