dov*_*vid 12 html css css3 ng-map angular-material
我正在尝试使用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>
呈现堆叠垂直.为什么？
在检查元素时，我发现 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>