Question

我有下一个案例：

<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中实现呢？

Answer 1

为您创建了一个jsfiddle - FIDDLE LINK

您正在寻找

display: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;
}

Answer 2

试试这个：

#parent div {
   min-width: 100%;
}

现在，隐藏div有两种选择。

您可以在服务器端执行此操作。
您使用JS隐藏客户端的div。

CSS不会隐藏条件上的元素。除非条件是与屏幕相关的属性。

服务器端：

if(condition == value) {
   /* write the code for the div here */
} else {
   /* don't write the div code on the first place. */
}

客户端相同，使用JS和if else的相同条件块，然后显示隐藏它。

提示隐藏div，

document.getElementById("child1").style.display = "none";
document.getElementById("child1").style.display = "block"; // for showing..

在堆栈和填充父div中划分

2 个答案: