为什么css网格不起作用

奋斗的程序员

我有一个 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 行，其余的占据相等的空间。

我究竟做错了什么？请帮忙。

更新

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

或者，代码库

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}
  ];
}]);

.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;
}

<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>

nitishk72

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

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

我编辑了 HTML 代码并在$scope.cardData 中添加了一个对象

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}
  ];
}]);

.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;
}

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-06-28

我来说两句

0 条评论

登录后参与评论

上一篇：为什么 PHP 在尝试实例化 SoapClient 对象时无法捕获导致的异常？

为什么css网格不起作用

为什么css网格不起作用

蓝屏死机没有修复解决方案

计算数据帧中每行的NA

UITableView的项目向下滚动后更改颜色，然后快速备份

Node.js中未捕获的异常错误，发生调用

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Linux的官方Adobe Flash存储库是否已过时？

验证REST API参数

ggplot：对齐多个分面图-所有大小不同的分面

Mac OS X更新后的GRUB 2问题

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

带有错误“ where”条件的查询如何返回结果？

用日期数据透视表和日期顺序查询

VB.net将2条特定行导出到DataGridView

如何从视图一次更新多行（ASP.NET - Core）

Java Eclipse中的错误13，如何解决？

尝试反复更改屏幕上按钮的位置 - kotlin android studio

离子动态工具栏背景色

应用发明者仅从列表中选择一个随机项一次

当我尝试下载 StanfordNLP en 模型时，出现错误

python中的boto3文件上传

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID