我有一個(gè)非常簡(jiǎn)單的 Flexbox 容器，有四個(gè) div（其中一個(gè)帶有 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>為了制作一個(gè)簡(jiǎn)單的邊框，我嘗試了：.container div:not(#map) {
border-right: 10px solid #FFFFFF;
}和.container div:not(:last-child) {
border-right: 10px solid #FFFFFF;
}邊界出現(xiàn)了，但相同的邊界出現(xiàn)在我的地圖中，我不知道如何擺脫它們...... - 圖片： 圖片鏈接或者，是否沒有其他方法可以在彈性盒中創(chuàng)建此類邊框？像這樣的東西：flex-gap: 10px #FFFFFF;或類似的東西...
1 回答
jeck貓
TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊
雖然我不能 100% 確定這個(gè)問題，但問題似乎在于你的 CSS 瞄準(zhǔn)了它不應(yīng)該瞄準(zhǔn)的東西。
Google 地圖將在該元素下添加多個(gè) div 元素#map，并且您的 CSS 規(guī)則也與這些元素匹配，因此它們也會(huì)獲得邊框。
您需要重置子 div 的邊框#map或排除它們。
如果有邊框的div元素是直接子元素，.container則使用
.container > div:not(#map) {
border-right: 10px solid #FFFFFF;
}
如果您有更復(fù)雜的結(jié)構(gòu)并且無(wú)法直接排除 的子級(jí)，#map則重置它們。
.container div {
border-right: 10px solid #FFFFFF;
}
.container #map div {
border-right: none;
}
- 1 回答
- 0 關(guān)注
- 92 瀏覽
添加回答
舉報(bào)
0/150
提交
取消