Question

我正在尝试在Ionic中制作网格视图。我能够制作网格视图但我面临一些css问题。

首先我的标题高度与图像相比太大了？我需要减少表格标题或标题的高度。
我可以给margin-left: 5%。它正在工作，但如果margin-right: 5%不起作用。为什么？
如何给出交替行的不同颜色？
如何在图像中显示颜色分隔线。要分隔列，请使用以下行：

这是我的代码

http://plnkr.co/edit/FqL7g2w5yLEREopY4B10?p=preview

.mrginrightleft {
   margin-left: 5%; 
   margin-right: 5%;
}
.brd {
  border: 1px solid grey;
}

Answer 1

如果您移除.row边距右边作品的宽度

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  /* width: 100%; */

对于备用行颜色，使用nth:child(odd) / (even); @fsacer是正确的，但标题行具有相同的类。您可以更轻松地将不同的类名添加到“表行”中，并排除标题：

      <div class="row gray-20 mrginrightleft">
        <div class="col col-center " ng-repeat="d in data | filter:{checked: true}"><i class="button button-icon icon ion-arrow-down-b" ng-click="sortdata()"></i><strong>{{d.label}}</strong></div>
        <div class="col col-10 text-center ">
          <button class=" button-icon icon ion-gear-b" ng-click="openPopover($event)"></button>
        </div>
      </div>
      <!-- added class "table-row" -->
      <div class="row mrginrightleft table-row" ng-repeat="column in displayData | filter: query">
        <div class="col col-center brd" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
        <div class="col col-10 text-center brd">
        </div>
      </div>

.scroll > .table-row:nth-child(odd) > div {
     background-color: red;
}

.scroll > .table-row:nth-child(even) > div {
     background-color: blue;
}

或使其变得更难:(未在下面测试 - 可能需要玩（2n + 2）部分）

.scroll > div.row.mrginrightleft:nth-child(2n+2) > div {
     background-color: red;
}

.scroll > div.row.mrginrightleft:nth-child(even) > div {
     background-color: blue;
}

为什么标题比图像中显示的高度大？

1 个答案: