我正在尝试使用angular material desgin与两列创建一个布局：
<div layout="row">
<div flex="33">
123
</div>
<div flex="77">
456
</div>
</div>
还可以。但是，如果我放置一个ng-map元素：
<div layout="row">
<div flex="33">
123
</div>
<div flex="77">
<ng-map ></ng-map>
</div>
</div>
呈现垂直堆叠。为什么？
演示：https：//plnkr.co/edit/mndhawgxc0vle7erttib？p = preview
查看 console ，您可以看到以下错误：
typeerror ：
$element.bind不是函数 在new __MapController（ng-map.js：318）
flex属性正在应用CSS类样式，如下所示：
./angular-material.min.css
.layout-row>.flex-66 {
-webkit-box-flex: 1;
-webkit-flex: 1 1 66.66%;
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box
}
，然后是其他一些样式，但这些样式负责Flexgrid。如果您在<ng-map>的父母上手动应用样式，则它们确实有效。
<ng-map>中提到的错误在某个时候停止脚本执行，以至于不应用预期的.flex-*类表单 ./angular-material.min.min.css.css 在包装<div>中。
考虑打开新问题（我检查了他们，现在没有）或仅使用不同的地图插件。
您不包括bootstrap stylesheet
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ctrl">
<div layout="row" style="display: flex;">
<div flex="33" style="width: 33%">
123
</div>
<div flex="77" style="width: 77%">
<ng-map ></ng-map>
</div>
</div>
</body>
</html>
live https://plnkr.co/edit/lldddensw3lhhxqkbv4?p=preview
检查元素时，我看到NG-MAP标签自动加载了Google API的一些样式，从而覆盖了Flex/Angular样式。
我在这里写了一个解决方案：https：//plnkr.co/edit/ghyzoc5botyd58rg0qdj？p = preview
我查看了Angular的布局文档，我认为实际上没有很好的方法来覆盖NG-MAP的CSS造型。
所以，我选择只使用一些使用浮动来定位两个元素的自定义CSS：
.first {
height: 250px;
width: 250px;
position: relative;
float: left;
}
.map {
height: 250px;
width: 250px;
position: relative;
float: right;
}
.container {
width: 500px;
margin-right: auto;
margin-left: auto;
height: auto;
}
html：
<body ng-controller="ctrl">
<div class="container">
<div class="first">Hello</div>
<ng-map class="map"></ng-map>
</div>
</body>