Question

我在努力学习CSS时遇到了困难。我似乎无法弄清楚如何使相对定位div考虑绝对定位div的文本。

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    position: relative;
    width: 600px;
    height: 100%;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 0px;
    right: 1;
    width: 100px;
    height: 100%;
    border-right: 3px solid #73AD21;
}
</style>
</head>
<body>


<center>
<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>
</center>

</body>
</html>

＆＃13;

如何制作以使线条扩展到侧边栏中的文字末尾？

由于

Answer 1

就像提到的评论一样，如果孩子是绝对定位的，那么父元素确实不可能调整其高度以包含孩子。

如果必须使用相对和绝对定位，则可以使用float或flexbox实现此效果。

浮动方法：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    width: 600px;
    height: 100%;
    border: 3px solid #73AD21;
    overflow: auto;
}

div.absolute {
    float: left;
    width: 100px;
    border-right: 3px solid #73AD21;
}
</style>
</head>
<body>


<center>
<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>
</center>

</body>
</html>

＆＃13;

弹性框方法：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    width: 600px;
    height: 100%;
    border: 3px solid #73AD21;
  
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

div.absolute {
    width: 100px;
    border-right: 3px solid #73AD21;
}
</style>
</head>
<body>


<center>
<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>
</center>

</body>
</html>

＆＃13;

如果右侧需要其他元素，则需要将所有元素包装在另一个容器中。

如何让CSS考虑具有绝对定位的侧边栏

1 个答案: