16

我正在尝试将子 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 的宽度。

提前致谢！

4

4 回答 4

11

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

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

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

于 2013-02-12T15:20:56.660 回答
4

使用现代 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/

  1. transform:translateY(-100%);是诀窍。它的数学是基于element's 的box-model。
  2. 您也可以结合top:50%;使用transform:translateY(-50%);以使其居中。
  3. 您可以交换topforleft和translateYfortranslateX以水平定位元素。
于 2015-06-23T15:18:40.067 回答
1

干得好

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/

于 2016-07-29T06:52:30.880 回答
0

你可以玩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>

于 2021-02-06T02:30:11.053 回答