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。你给它一个特定的宽度（200px）。通过将孩子设置为100％，您将有效地说出与父母一样多的费用。

https://jsfiddle.net/9vk44jq9/

Answer 2

您可以将CSS rule "single pattern - after retract" salience 10 when $f: FruitFact() then System.out.println("$f: " + $f); retract($f); end属性设置为overflow，该属性会剪切容器外的所有内容。

这类问题有很多微妙的变化，因此有时需要不同的解决方案。

让孩子们遵守父母的宽度

JSFiddle

2 个答案: