相对定位的父级DIV继承绝对定位子级DIV的宽度。

Question

我想把子元素 DIV 放在父元素 DIV 的底部，同时希望子元素 DIV 的内容能够影响父元素 DIV 的尺寸。但是现在的情况是，子元素 DIV 并不能影响父元素 DIV 的宽度/高度。以下是我的 HTML/CSS 代码示例：

<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的宽度。

先行致谢！

- jaxim

---

你的意思是希望 #parent 的宽度由 #child 决定，因此它的宽度为 100 像素吗？如果是这样，请将你的 #parent div 设置为 "display: inline-block"，看看是否符合你的要求。 - Billy Moat

是的。虽然在这个例子中子 DIV 的宽度是在 CSS 中指定的，但在我的实际项目中，宽度是由 JS 代码动态决定的。 - jaxim

这种东西？http://jsfiddle.net/Avww9/ - Billy Moat

你的示例中标题决定了父级 DIV 的宽度。如果标题不像子 DIV 一样宽，那么父级 DIV 仍然会是标题的宽度而不是子 DIV 的宽度。 - jaxim

好的 - 我很确定你想要的无法仅通过 CSS 实现。 - Billy Moat

Answer 1

简短的回答是，仅通过纯CSS / HTML基本上无法完成您所要求的操作 (至少没有使用表格)，您需要使用JavaScript来读取 #child 的宽度/高度并进行所需的计算 (我不知道是什么)，然后设置新的高度/宽度给 #parent。

否则，如果您的意思是希望 #child 的高度/宽度可以根据其内容变化，当然这是可以通过原生CSS实现的，只需将其高度/宽度设置为自动，然后在其中添加文本，您会发现它将开始根据您的内容增长以适应内部内容。由于 #child 采用绝对定位，因此它被从文档的标准流程中排除，因此不会影响 #parent。

- George Katsanos

---

那正是我担心的。我想一旦我知道子DIV的内容，我可以动态设置父DIV的宽度。或者，我可以使用表格标签，在HTML中快速完成任务的大杀器。 - jaxim

嗯，如果你真的仔细考虑一下，你的设计背后有一些"逻辑"，因此-至少目前来说- JS（jQuery）是最好的选择。 - George Katsanos

Answer 2

With modern CSS, this is doable.

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/

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

- Jason Lydon

---

你的小提琴对我不起作用：父元素比子元素宽。 - Labrador

代码的哪一部分涉及到从子元素传递宽度给父元素的操作？ - greenoldman

Answer 3

你可以尝试使用 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>

- vanelizarov

---

你在子元素中错过了absolute定位。 - greenoldman

Answer 4

给你

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/

- Marcel Tinner

---

你硬编码了父元素的宽度，而没有继承绝对定位子元素的宽度。因此，这并不是问题的答案。 - Sebastian Nielsen