我有一個非常簡單的 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 關注
- 94 瀏覽
添加回答
舉報
0/150
提交
取消