使用子元素定位Div

Question

我有两个堆叠的div包含子元素，我想要的是，如果我将可见性设置为隐藏到第一个div，它应该消失，并且第一个div下的第二个div应该通过保持第二个div中的子元素的位置来取代第一个div。

下面是代码。

<div id="wrapper">  
     <div id="first" style="top:10px; width:400px; border-style:solid;border-width:1px;">   
        A quick brown fox jumps over the lazy dog..................
</div>

<div id="second" style="top:100px;width:400px; border-style:solid; border-width:1px;">
     <div id="child1" style="margin-left:250px">
            21st, October 2011
     </div>
  </div>
<div>

Answer 1

如果你这样做：

<div id="wrapper" style="width:400px;">  
     <div id="first" style="display:none;top:10px; border-style:solid;border-width:1px;">   
        A quick brown fox jumps over the lazy dog..................
    </div>
     <div id="second" style="border-style:solid; border-width:1px;">
         <div id="child1" style="margin-left:250px">
                    21st, October 2011
         </div>
     </div>
</div>

将wrapper放在两个对象周围，如果第一个div被隐藏，则第二个div将跳到第一个div的位置。

Answer 2

使用display:none而不是visibility:hidden

Answer 3

CSS visibility: hidden;只会隐藏元素，它仍然会在文档流中为元素保留空间。

您需要的是display: none;，它将完全删除该元素。

Example coded here。(单击#second目录以激活。