相对父DIV继承绝对子DIV的宽度答案

【问题标题】：Relative parent DIV to inherit the width of absolute child DIV相对父DIV继承绝对子DIV的宽度
【发布时间】：2013-02-12 15:10:58
【问题描述】：

我正在尝试将子 DIV 放置在父 DIV 的底部，但我还希望子 DIV 的内容有助于确定父 DIV 的尺寸。正如我现在所拥有的，子 DIV 不会影响父 DIV 的宽度/高度。

这是我的 HTML/CSS 代码示例：

//HTML代码：

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child"></div>
</div>

//CSS代码：

#parent {
    background-color:#222;
    position: relative;
    height: 500px;
}
#child {
    background-color:#444;
    position: absolute;
    bottom: 0px;
    width: 100px;
    height: 200px;
}

我需要做什么才能实现我想要做的事情？我可以放弃绝对/相对 CSS 规则，只需在父 DIV 中创建一个表格，这将允许我实现底部对齐和指示父级尺寸的内容。

但是，我想知道是否有办法在 CSS 中做到这一点，而不必设置父 DIV 的宽度。

提前致谢！

【问题讨论】：

你的意思是你想让#parent 从#child 获取它的宽度，所以宽度是100px？然后让你的#parent div“显示：内联块”，看看这是否是你所追求的。
是的。虽然本例中子 DIV 的宽度是在 CSS 中指定的，但我实际项目中的宽度是在 JS 代码中动态指定的。
这种事？ jsfiddle.net/Avww9
示例中的标题是指定父 DIV 的宽度。如果标题没有子 DIV 宽，那么父 DIV 仍然是标题的宽度，而不是子 DIV。
很公平 - 很确定你想要的东西不能单独用 css 完成。

标签： css

【解决方案1】：

简短的回答是，你所问的基本上不能用纯 CSS/HTML 来完成。（至少没有表格）您需要 Javascript 来读取 #child 的宽度/高度，然后进行您想要做的计算（我不知道）并将新的高度/宽度设置为 #parent。

否则，如果你的意思是你想让#child的高度/宽度根据其内容而改变，当然这是原生CSS，只需将它的高度/宽度设置为自动，然后开始在其中添加文本你就会看到它将开始增长以适应您的内容。

由于#child 是绝对定位的，所以它会从文档的正常流程中取出，因此不会影响#parent。

【讨论】：

这就是我所害怕的。我想我可以在知道子 DIV 的内容后动态设置父 DIV 的宽度。或者，我想我可以使用 table 标记，它是在 HTML 中快速完成工作的备用标签。
好吧，如果你仔细想想，你的设计背后有一些“逻辑”，因此 - 至少现在 - JS (jQuery) 是要走的路..

【解决方案2】：

使用现代 CSS，这是可行的。

HTML：

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child">
        <p>CHILD ELEMENT</p>
    </div>
</div>

CSS：

#parent {
    background:red;
    height: 500px;
    position:relative;
}
#child {
    background:green;
    position: absolute;
    top:100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100px;
}

http://jsfiddle.net/Bushwazi/bpe5s6x3/

transform:translateY(-100%); 是诀窍。它的数学是基于element 的box-model。
您还可以将top:50%; 与transform:translateY(-50%); 结合起来使其居中。
您可以将top 替换为left，将translateY 替换为translateX，以水平定位元素。

【讨论】：

你的小提琴对我不起作用：父母比孩子宽

【解决方案3】：

给你

HTML：

<main id="parent">
  <div class="popup">Top Aligned Title
    <div class="content">
      Content
    </div>
  </div>
</main>

CSS：

#parent {
  width: 120px;
}

.popup {
  position: relative;
  margin-top: 48px;
}

.content {
  left: 0;
  position: absolute;
  background: green;
  width: 100%;
}

http://jsfiddle.net/8L9votay/

【讨论】：

您正在硬编码父级的宽度，而不是继承绝对定位子级的宽度。因此，这不是问题的答案。

【解决方案4】：

您可以使用flex 和零宽度/高度。

我最近想出了以下解决方案（宽度）：

#parent {
  display: inline-flex;
  flex-direction: column;
  
  background: #518cff;
  color: #fff;
}

#child-wrapper {
  height: 0; /* This can also be max-height, but height is just enough */
}

#child {
  transform: translateY(-100%); /* If you need to align child to the bottom */
  
  background: #b40000;
  color: #fff;
}

<div id="parent">
  <h3>Top Aligned Title</h3>
  <div id="child-wrapper"> <!-- This is the solution -->
    <div id="child">
      Child's content that is longer than parent's
    </div>
  </div>
</div>

【讨论】：