我有下一种情况:

<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 LINK

display:nonedisplay: 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/

10-12 12:24
查看更多