如何在外部父div邊框時不顯示子div

我試圖讓子div在其超過父級邊界時不顯示。現在，我結束了這一點：JSFIDDLE如何在外部父div邊框時不顯示子div

我想要得到的東西是這樣的：

你可以看到，孩子div（紅色邊框）比父母更大（藍邊界），並且當它超出父母的borders時父母「收穫」它。

注意：我不想紅色邊框顯示在最後，它只是在那裏顯示孩子比父母大。

這可能嗎？謝謝您的幫助！

2016-03-15 Kragalon

請注意，您應該包括在問題本身的代碼，一個的jsfiddle是不夠的，因爲鏈路可能死亡留下的問題沒有上下文。嗯，問題是，如果你在'＃contains'上使用'overflow：hidden'，'border'將會被截斷。你是否總是知道將在這些元素上使用的'width'，'height'和'padding'？如果'＃big''div'中有內容（即文本或其他元素），你會期望它被裁剪嗎？ –

@HiddenHobbes不需要邊框，它只是爲了顯示div繼續前進。我的錯。 – Kragalon

在這種情況下@Kragalon'overflow：hidden;'是你所需要的。 –

嘗試使用這種風格：

#contain{ 
    width:300px; 
    height:200px; 
    border:1px blue dashed; 
    background-color:rgba(60, 10, 10, .5); 
    padding:20px; 
    overflow:hidden; 
}

來源

2016-03-15 08:29:40

只需添加overflow:hidden;你的風格。

來源

2016-03-15 08:32:08

將overflow: hidden;添加到父div。

#contain{ 
 
    width:300px; 
 
    height:200px; 
 
    border:1px blue dashed; 
 
    background-color:rgba(60, 10, 10, .5); 
 
    padding:20px; 
 
    overflow:hidden; 
 
} 
 

 
#big{ 
 
    width:500px; 
 
    height:300px; 
 
    border:1px red solid; 
 
    background-color:rgba(30, 30, 30, .5); 
 
}

<div id='contain'> 
 
    <div id='big'> 
 

 
    </div> 
 
</div>

來源

2016-03-15 08:34:15

如何在外部父div邊框時不顯示子div

回答

相關問題