Question

我正在尝试将子DIV放在父DIV的底部，但我也希望子DIV的内容帮助决定父DIV的尺寸。正如我现在所做的那样，子DIV不会影响父DIV的宽度/高度。

以下是我的HTML / CSS代码示例：

// HTML code：

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

提前感谢！

Answer 1

简短的回答是，你所要求的基本上不能用纯CSS / HTML完成。（至少没有表格）你需要能够读取＃child＆＃39; s宽度/高度的Javascript，然后进行你想要做的计算（我不知道）并设置一个新的高度/宽度到#parent。

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

由于#child位于绝对位置，因此它取自文档的正常流量，因此不会影响#parent。

Answer 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＆＃39; box-model。
您还可以将top:50%;与transform:translateY(-50%);合并为中心。
您可以top left和translateY translateX交换水平放置元素。

Answer 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/

Answer 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>

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

4 个答案: