[英]Make children abide by parents width
我有一个div
嵌套在两个div's
。 最外面和最里面的div
具有设定的宽度。 我想将最外面的div's
width
为0,这样它的所有子元素也将为0,或者至少不可见。
但是,当我将最外面的div's width
为0时,最里面的div
是可见的。
将最外面的div's width
设置为0时,如何使子代遵守其父代规则?
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>
您需要指定宽度为100%的子div。 您为其指定了特定宽度(200像素)。 通过将孩子设置为100%,您将说出与我父母一样多的孩子。
#content {
background-image: url("http://i.imgur.com/nri7bYd.jpg");
height: 200px;
width:100%;
}
您可以将CSS overflow
属性设置为hidden
,这会将所有内容裁剪到容器外部。
这种问题有很多细微的变化,因此有时需要不同的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.