我有一个页面,其中包含一些AngularJS材质卡,需要将其分为两列。最后一张卡片应在两列下方显示完整宽度。但是,#3和#4卡(取决于宽度)与最终卡重叠。我花了几个小时来调试它,但无法找出原因。
这是我的代码:
angular.module('app', ['ngMaterial']).controller('ctrl', function() {});
<!-- Angular Material Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.9/angular-locale_de-de.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-cookies.min.js"></script>
<!-- Angular Material Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<div ng-app="app" ng-controller="ctrl" ng-cloak>
<form name="couponform" novalidate>
<div layout="column" layout-gt-sm="row">
<div flex="auto" flex-gt-sm="60">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #1</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #2</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #3</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #4</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
</div>
<div flex="auto" flex-gt-sm="40">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card right</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
</div>
</div>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card below</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>This should be below everything else</p>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button ng-click="submit()">Buchen</md-button>
</md-card-actions>
</md-card>
</form>
</div>
这里是输出的相关部分:
实际上,如果您在此处运行代码,它会按预期显示,但如果是单独的HTML文件,则不会。很奇怪。
您缺少<!DOCTYPE html>
,如果没有此选项,浏览器将以怪异模式呈现页面。
我为代码段创建了this代码笔,即使将宽度更改为任何值,它也似乎正常工作。
这可能是浏览器问题,似乎不是Angular的实质性错误。
angular.module('app', ['ngMaterial']).controller('ctrl', function() {});
<!-- Angular Material Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.9/angular-locale_de-de.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular-cookies.min.js"></script>
<!-- Angular Material Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<div ng-app="app" ng-controller="ctrl" ng-cloak>
<form name="couponform" novalidate>
<div layout="column" layout-gt-sm="row">
<div flex="auto" flex-gt-sm="60">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #1</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #2</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #3</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card left #4</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
</div>
<div flex="auto" flex-gt-sm="40">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card right</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</md-card-content>
</md-card>
</div>
</div>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card below</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>This should be below everything else</p>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button ng-click="submit()">Buchen</md-button>
</md-card-actions>
</md-card>
</form>
</div>