在隐藏的父级Div中显示Child Div

Question

如何在保持其父级隐藏的同时显示Child Div？可以这样做吗？

我的代码如下:

<style>
  .Main-Div{
   display:none;
}
</style>

<div class="Main-Div">
    This is some Text..
    This is some Text..
    <div class="Inner-Div'>
        <a href="#"><img src="/image/pic.jpg"></a>
    </div>
    This is some Text..
    This is some Text..
</div>

Answer 1

将父类的可见性设置为隐藏或折叠.将孩子设置为可见.像这样的东西:

.parent>.child
{
    visibility: visible;
}

.parent
{
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

完整示例:http: //jsfiddle.net/pread13/h955D/153/

在@ n1kkou的帮助下编辑

Answer 2

我不认为这是可能的.

你可以使用javascript拉出元素,或复制它然后显示它.

在jQuery中你可以复制一个元素

var element = jQuery('.Inner-Div').clone();

然后附加到任何适当的可见元素.

element.appendTo('some element');

Answer 3

同意,不可能与display:none.这是一个隐藏父项和显示子项的不同解决方案 - 但是,父项的高度不会折叠.

.Main-Div {
    position: relative;
    left: -9999px;
}

.Inner-Div {
    position: relative;
    left: 9999px;
}

示例:http://jsfiddle.net/luke_charde/jMYF7/

Answer 4

为什么不：

.Main-Div{
font-size:0px;
line-height:0;
margin:0;
padding:0;
height:0;

}

.Inner-Div{
font-size:12pt
}

而不是 display:none 如果您的主 Div 是纯文本？

此解决方案应在不隐藏子 div 的情况下折叠父 div 中的文本。也仍然可以与屏幕阅读器一起使用，而不会做一些奇怪的事情，比如将 div 撞出视野或用 JS 复制对象。