1

我会尽力解释我的情况。

我有一个网站，它显示了一个包含信息的 DIV 块列表。使用 width:33% 创建 3 个 DIV 块

在那个 div 块内，我想要另一个与前一个 div 块完全相同的隐藏 div 块。

所以我有这样的东西......

<div class="columnParent">
      <div class="columnChild">
            "Various stuff here that overlaps parent DIV"
      </div>

      "Various text that initially appears, but disappears after clicking a button"
</div>

这是CSS...

.columnParent { width:31%; float: left; margin-right:15px; margin-bottom:4%; }
.columnChild { width:31%; float: left; margin-right:15px; margin-bottom:4%; visibility:hidden; position: absolute;
background: #FFF;}

现在当子 DIV 可见时会发生什么，它最终比父 DIV 大。这是因为 width:31% 占据了整个 HTML 页面的 31%，而父 div 占据了其父 div 的 31%（此处未列出）。

有没有办法让子 DIV 采用与其父级相同的宽度？

我希望子 div 是其父 div 的精确复制品。我将更改里面的文本，但实际的 div 应该是相同的大小并且在完全相同的位置。

目的：我有一个显示子 div 的按钮，使父级消失并显示一个具有不同信息的新子 div。在子 div 内会有一个后退按钮，使该 div 再次消失（使用 JS）。

任何帮助是极大的赞赏！！！谢谢！

4

2 回答 2

0

put the child element width: 100%; , then it will take the exact width of parent element. After that, you can include jQuery to fadeIn/fadeOut the child element and manipulate it as you wish in javascript codes.

于 2013-08-10T20:51:53.857 回答
0

您可以尝试给定宽度 100% 和相对于 columnChild 的位置，如下所示。

.columnChild { 
    width:100%; 
    float: left; 
    margin-right: 15px; 
    margin-bottom: 4%; 
    visibility: hidden; 
    position: relative;
    background: #FFF;
}

注意：Position relative 将有助于调整相对于父位置的位置，宽度 100% 将有助于使宽度与父 div 相同。

于 2013-08-11T05:53:50.457 回答