html - 调整绝对 DIV block 的宽度

Question

我会尽力解释我的情况。

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

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

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

<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 内部会有一个后退按钮，使该 div 再次消失(使用 JS)。

非常感谢任何帮助!!!谢谢!

Answer 1

将子元素设置为 width: 100%; ，那么它会取父元素的精确宽度。之后，您可以包含 jQuery 来淡入/淡出子元素，并在 javascript 代码中按照您的意愿对其进行操作。