Question

我会尽力解释我的情况。

我有一个网站，其中显示了包含信息的DIV块列表。使用宽度创建3个DIV块：33％

在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可见时会发生什么，它最终比父母大。这是因为宽度：31％占整个HTML页面的31％，而父div占其父div的31％（此处未列出）。

有没有办法让孩子DIV的宽度与父母一样？

我希望Child div成为其父div的精确副本。我将更改内部文本，但实际div应该是相同的大小，并且位于完全相同的位置。

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

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

Answer 1

放置子元素width: 100%;，然后它将采用父元素的确切宽度。之后，您可以将jQuery包含在fadeIn / fadeOut子元素中，并在javascript代码中按照您的意愿进行操作。

Answer 2

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

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

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

调整绝对DIV块的宽度

2 个答案: