讓孩子遵守父母的寬度

Question

我有一個div嵌套在兩個div's 。 最外面和最里面的div具有設定的寬度。 我想將最外面的div's width為0，這樣它的所有子元素也將為0，或者至少不可見。
但是，當我將最外面的div's width為0時，最里面的div是可見的。

將最外面的div's width設置為0時，如何使子代遵守其父代規則？

JSFiddle

 var outer = document.getElementById('outer'), small = document.getElementById('small'), large = document.getElementById('large'); small.addEventListener('click', function() { outer.style.width = 0; }); large.addEventListener('click', function() { outer.style.width = '300px'; }); 

 #outer { width: 300px; background-color: orange; } #content { background-image: url("http://i.imgur.com/nri7bYd.jpg"); height: 200px; width: 200px; } #content2 { background-color: red; width: 100px; } 

 <div id="outer"> <div id="inner"> <div id="content">This is some content</div> <div id="content2">This is another content</div> </div> </div> <button id="small">width = 0</button> <button id="large">width = 300px</button> 

Answer 1

您需要指定寬度為100％的子div。 您為其指定了特定寬度（200像素）。 通過將孩子設置為100％，您將說出與我父母一樣多的孩子。

#content {
    background-image: url("http://i.imgur.com/nri7bYd.jpg");
    height: 200px;
    width:100%;
}

https://jsfiddle.net/9vk44jq9/

Answer 2

您可以將CSS overflow屬性設置為hidden ，這會將所有內容裁剪到容器外部。

這種問題有很多細微的變化，因此有時需要不同的解決方案。