Html 定位div元素

我面临着在数据分区中对齐内容分区的问题。数据分区不是固定的 高度。因为当内容div增加时，它是自动高度

但它将失去流动性。如何解决

.container
{
位置：相对位置；
边框：1px纯蓝色；
保证金：自动；
宽度：200px；
}
.数据
{
位置：相对位置；
边框：1px纯绿色；
宽度：100px；
顶部：10px；
左：10px；
}
.赫德
{
位置：绝对位置；
边框：1px实心橙色；
宽度：30px；
高度：10px；
顶部：-5px；
左：10px；
边界半径：5px；
背景颜色：橙色；
线高：10px；
}

这是绝对的。
xxx

您可以设置

overflow:hidden;

---

对于“container”div

如果您想让

容器

随着

数据

div的展开而展开，请在结束

div

标记之前添加

---

将所有

css

位置更改为

relative

并使用

minheight

然后重试

像这样

.container {
    position:relative;
    border:1px solid blue;
    margin:auto;
    width:200px;
    min-height:10px; //added
}
.data {
    position:relative;
    border:1px solid green;
    width:100px;
    top:10px;
    left:10px;
}
.hed {
    position:relative;  //changed
    border:1px solid orange;
    width:30px;
    height:10px;
    top:-50px; //changed
    left:10px;
    border-radius:5px;
    background-color:orange;
    line-height:10px;
}

---

为什么要使用fordiv class=“data”：

• 顶
• 左

您只需要将它们替换为上边距和左边距

.container
{
位置：相对位置；
边框：1px纯蓝色；
保证金：自动；
宽度：200px；
}
.数据
{
位置：相对位置；
边框：1px纯绿色；
宽度：100px；
页边距顶部：10px；//已更改
左边距：10px；//已更改
}
.赫德
{
位置：绝对位置；
边框：1px实心橙色；
宽度：30px；
高度：10px；
顶部：-5px；
左：10px；
边界半径：5px；
背景颜色：橙色；
线高：10px；
}

这是绝对的。
xxx

您的代码在哪里？？？[link]（）它需要扩展。@用户3836476:检查我的答案它会在添加更多数据时扩展我对position属性感到困惑。你能提供一些参考链接来区分相对和绝对吗？我对位置属性感到困惑。当我们使用绝对值和相对值时，请您提供任何参考链接。@user3836476:我的答案给您正确的答案了吗？@user3836476:仔细阅读并理解谢谢。这对我帮助很大。@user3836476然后请单击我答案左侧的箭头接受我的答案，谢谢：）