我在尝试学习CSS时遇到了困难。我似乎无法弄清楚如何使相对定位的div考虑到绝对定位的div的文本。
这是我的代码：
<!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>如何使行扩展到侧边栏中的文本结尾？
谢谢
最佳答案
就像评论中提到的那样，如果绝对定位了父元素，则确实不可能调整其高度以包含子元素。
如果相对和绝对定位不是必须的，则可以使用float或flexbox达到此效果。
使用float属性：
div.relative {
width: 600px;
height: 100%;
border: 3px solid #73AD21;
overflow: auto;
}
div.absolute {
float: left;
width: 100px;
border-right: 3px solid #73AD21;
}<center>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</center>使用
flex-box属性：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;
}<center>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</center>如果右侧需要其他元素，则需要将所有元素包装在另一个容器中。
关于css - 如何使CSS考虑绝对定位的侧边栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40313742/