Html 如何将div移动到绝对div的底部和顶部

我有一个绝对定位的div，它有两个孩子

---

我试图将一个孩子移动到div的顶部，而另一个移动到底部，但无法使用

bottom:0

和

top:0

完全理解它。我还尝试只为其中一个元素使用内容的宽度，而不是父元素的整个宽度。

您可以像这样使用

flex

-box。

---

或者只使用所需的空间。

对CSS进行了一些调整-您已经接近了！只需

定位：绝对

正确的元素以及

顶部

和

底部

，以及

定位：相对

父元素

通过这样做，元素的宽度将自动限制为其内容

查看我的评论，查看添加和删除的内容

html，
身体{
身高：100%；
宽度：100%；
框样式：边框框；
保证金：0px
}
.事件页面{
宽度：100%；
身高：100%
}
.事件页面标题{
位置：相对位置；
高度：450px；
最大高度：70vh；
填充：0.1.75rem；
宽度：100%；
}
.事件页面标题.事件标题内容{
宽度：100%；
身高：100%；
/*位置：绝对；//已删除*/
z指数：200；
填充：0 20px；
/*底部：0；//已删除*/
/*增加1行：*/
位置：相对位置；
}
.事件类型标签{
背景：rgba（161178166.8）；
边界半径：2px；
溢出：隐藏；
字体系列：Lato；
字母间距：1px；
文本转换：大写；
颜色：#fff；
字号：0.8em；
字体大小：300；
字母间距：.05em；
线高：1；
填充物：5px；
/*增加了两行：*/
位置：绝对位置；
排名：0；
}
.事件标题{
颜色：#fff；
字体系列：Lato；
字号：3em；
字体大小：300；
线高：120%；
保证金：.5雷姆0；
/*增加了两行：*/
位置：绝对位置；
底部：0；
}
.事件标题图像{
背景：红色；
位置：绝对位置；
显示：块；
宽度：100%；
身高：100%；
左：0；
排名：0；
z指数：100；
}
@介质（最小宽度：769px）{
.event头映像：：after{
背景：线性梯度（rgba（65,77,87,0），rgba（65,77,87,7））；
底部：0；
内容：''；
身高：70%；
左：0；
位置：绝对位置；
宽度：100%；
}
}

事件标签
活动名称

更改CSS：

.event-type-label{
  background: rgba(161,178,166,.8);
  border-radius: 2px;
  overflow: hidden;
  font-family: Lato;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  top: 0;
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1;
  padding: 5px;
}

.event-header-title {
color: #fff;
position: absolute;
bottom:0;
font-family: Lato;
font-size: 3em;
font-weight: 300;
line-height: 120%;
margin: .5rem 0;
}

---

将

position:absolute

添加到childs将解决您的问题。因为绝对定位元素只占内容的宽度。

我试图避免使用flexbox。我做了一个变通办法，将

absolute

div设置为

relative

，然后使每个元素

position:absolute

可以使用事件标记，事件标题元素需要指定position:absolute和X，Y。例如，左：0，顶部：0。我看到他们的父母有绝对的权利。如果你不需要绝对定位，它们可以是相对的。检查不同的选项，使容器仅与内容一样宽。