Question

我有一个如下的html模板：

<div>
    <div class="my-grid-container"  ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
         <div class="myClass">
             My custom div
         </div>
    </div>
</div>

我希望第一个div跨越两行，类似于：

我正在使用 CSS3 GridBox，如下所示：

.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  max-height: 70px;
}

.my-grid-container > .myClass:first-child {
    grid-row: 1 / 3;
}

但它没有用。 div都叠在一起。 但我希望第一个div跨越2行，其余的则占据相等的空间。

我做错了什么？请帮忙。

更新

请参阅codepen。 https://codepen.io/chiranjib/pen/vjpOKE

或者，代码库

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('CardController', ['$scope', function($scope) {
  $scope.cardData = [
    {'name': 'My Div1', 'quantity': 3, 'price': 1.10},
    {'name': 'My Div2', 'quantity': 2, 'price': 1.99},
    {'name': 'My Div3', 'quantity': 1, 'price': 3.22},
    {'name': 'My Div4', 'quantity': 1, 'price': 3.74}
  ];
}]);

＆＃13;

.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  background-color: aqua;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  height: auto;
}

.my-grid-container > .myClass:first-child {
    grid-row: 1 / 3;
}

＆＃13;

<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body ng-controller="CardController">
            <div  class="my-grid-container" ng-repeat="cardData in cardData" >
               <div class="myClass">
                My Changed Divs
             </div>
        </div> 
  </body>
</html>

＆＃13;

Answer 1

这是完美的工作。实际上，你在每次重复中都创建了 my-grid-container 类，这是错误的。

var myApp = angular.module('myApp', []);

myApp.controller('CardController', ['$scope', function($scope) {
  $scope.cardData = [
    {'name': 'My Div1', 'quantity': 3, 'price': 1.10},
    {'name': 'My Div2', 'quantity': 2, 'price': 1.99},
    {'name': 'My Div3', 'quantity': 1, 'price': 3.22},
    {'name': 'My Div4', 'quantity': 1, 'price': 3.74},
    {'name': 'My Div5', 'quantity': 1, 'price': 3.74}
  ];
}]);

我编辑了HTML代码并在 $ scope.cardData

中添加了一个对象

＆＃13;

.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  background-color: aqua;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  height: auto;
}

.my-grid-container > .myClass:first-child {
    grid-row: 1 / 3;
}

＆＃13;

<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body ng-controller="CardController">
            <div  class="my-grid-container" >
               <div class="myClass"  ng-repeat="cardData in cardData">
                My Changed Divs
             </div>
        </div> 
  </body>
</html>

＆＃13;

Order_ID, Item_ID
101,121
101,121
101,223
101,234

＆＃13;

为什么css网格不起作用

1 个答案: