Google 地图 API CSS 边框问题：对；

Question

我有一个非常简单的 Flexbox 容器，有四个 div（其中一个带有 Google Maps API）。

<div class="container">
    <div class="main-1"></div>
    <div class="main-2"></div>
    <div class="main-3"></div>
    <div id="map" class="main-map"></div>
    </div>

为了制作一个简单的边框，我尝试了：

.container div:not(#map) {
    border-right: 10px solid #FFFFFF;
}

和

.container div:not(:last-child) {
    border-right: 10px solid #FFFFFF;
}

边界出现了，但相同的边界出现在我的地图中，我不知道如何摆脱它们...... - 图片： 图片链接

或者，是否没有其他方法可以在弹性盒中创建此类边框？像这样的东西：

flex-gap: 10px #FFFFFF;

或类似的东西...

Answer 1

虽然我不能 100% 确定这个问题，但问题似乎在于你的 CSS 瞄准了它不应该瞄准的东西。Google 地图将在该元素下添加多个 div 元素#map，并且您的 CSS 规则也与这些元素匹配，因此它们也会获得边框。您需要重置子 div 的边框#map或排除它们。如果有边框的div元素是直接子元素，.container则使用.container > div:not(#map) {    border-right: 10px solid #FFFFFF;}如果您有更复杂的结构并且无法直接排除 的子级，#map则重置它们。.container div {    border-right: 10px solid #FFFFFF;}.container #map div {    border-right: none;}