CSS:将相对定位的父级与绝对定位的子级的高度拟合 [英] CSS: fit relative positioned parent to height of absolute positioned child

问题描述

我正在尝试制作一个简单的幻灯片.到目前为止，基本标记看起来像这样:

I am trying to build a simple slideshow. So far, the basic markup looks like this:

<h1>My Slideshow</h1>

<p>This paragraph behaves as expected.</p>

<div class="slide-container">
  <div class="slide">
    <h2>First Slide</h2>
    <p>Some stuff on this slide…</p>
  </div>

  <div class="slide">
    <h2>Second Slide</h2>
    <p>And some more stuff here…</p>
  </div>
</div>

<p>This paragraph will disappear beneath the stacked images.</p>

这是相应的CSS:

.slide-container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;

  /* just for the looks */
  width: 20em;
  padding: 0 1em;
  border: 1px solid steelblue;
  background: white;
}

问题是.slide-container与其子代.slide的高度不匹配(请参见屏幕截图).

The problem is, that the .slide-container does not fit to the height of its child (or children) .slide (see screenshot).

我知道我可以手动设置.slide-container的高度，但是我想将其放置在高度可变的流体网格中.有什么办法可以做到这一点?

I know i can set the height of the .slide-container manually, but i want to put this in a fluid grid, where the height is variable. Is there any way to achieve this?

推荐答案

绝对放置的项目在逻辑上与它们的父项相关联，但不是物理上"相关联.它们不是布局的一部分，因此父项无法真正看到它们的大小.您需要自己编写大小，或者使用JavaScript嗅探并在运行时进行设置.

Absolutely-positioned items are logically-associated with their parent, but not "physically". They're not part of the layout, so the parent item can't really see how big they are. You need to code the size yourself, or sniff it with JavaScript and set it at run-time.

这篇关于CSS:将相对定位的父级与绝对定位的子级的高度拟合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！