我有一个非常简单的 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;或类似的东西...
1 回答
jeck猫
TA贡献1909条经验 获得超7个赞
虽然我不能 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;
}
- 1 回答
- 0 关注
- 39 浏览
添加回答
举报
0/150
提交
取消