我有下一种情况:
<div id="parent" style="height:100%;">
<div id="child1">Some content</div>
<div id="child2">Another content</div>
</div>
有两个要求:
1)每个孩子都应扩大到父母的大小(100%)。
2)在某些情况下,应在其他“ child2”中为用户显示“ child1”。
那么如何在CSS中实现呢?
最佳答案
为您创建了一个jsfiddle-FIDDLE LINKdisplay:none
和display: block
是您要寻找的。
默认情况下,所有子div都是隐藏的(#parent div { display: none; }
)。要显示的孩子(在本例中为#child2
)被赋予display:block
取消隐藏。 display: block;
还可以使孩子的身高达到100%。
正如一些乐于助人的人指出的那样,您可能需要根据要实现的目标使用一些PHP / javascript / jQuery。您当前使用的是PHP还是jQuery之类的东西?
的HTML
<div id="parent">
<div id="child1">Child 1</div>
<div id="child2">Child 2</div>
</div>
的CSS
#parent {
width: 400px;
height: 300px;
background: #F00;
}
#parent div {
background: #CCC;
height: 100%;
display: none;
}
#parent #child1 {
display: none;
}
#parent #child2 {
display: block;
}
关于html - 堆栈中的Div并填充父div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21656741/