具有柔性布局的角形材料卡重叠

时间：2016-12-20 16:08:58

标签： angularjs flexbox angular-material

我有一个页面，其中包含一些需要排列成两列的Angular卡片。最后一张卡应显示两列下方的全宽。但是，卡＃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>

以下是输出的相关部分：

enter image description here

实际上，如果你在这里运行代码它会按预期出现，但如果它是一个单独的HTML文件，它就不会。很奇怪。

2 个答案:

答案 0 :(得分：2)

您缺少<!DOCTYPE html>，没有这个，浏览器会以怪癖模式呈现页面。

请参阅Why do I need a doctype? (What does it do)

答案 1 :(得分：0)

我为代码段创建了this codepen，即使将宽度更改为任何内容，它似乎也能正常工作。

这可能是一个浏览器问题，似乎不是一个Angular材料错误。

＆＃13;
＆＃13; 
    angular.module('app', ['ngMaterial']).controller('ctrl', function() {});
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题