Html div'的定位；s使用css：绝对定位div的布局问题

下面的代码显示了一个圆加上一个条，使用。我遇到的问题是，实际上，

条

的固定高度等于

圆

的高度。我猜这是因为

绝对

内联块

。但是，我似乎需要

absolute

内联块

，因为没有它们，

文本

被放在条的下面而不是里面

我遇到的问题是，如果

text

div中的文本不适合

bar

（文本太多），则文本会在该条下方运行（因此该条的高度不会扩展）。第二个问题是，如果

bar

中的文本很少，则

下半部分与
bar
重叠。如何针对这些问题调整代码


.tophalf{
宽度：100%；
背景：#F1F3F2无重复滚动0%0%；
填充物：5em；
}
.酒吧{
背景：#333；
左边距：75px；
最小高度：150px；
}
.圆圈{
宽度：150px；
高度：150像素；
边界半径：50%；
背景：白色；
盒影：0.08像素rgba（0,0,0,8）；
左边距：-75px；
位置：相对位置；
垂直对齐：中间对齐；
右边距：20px；
溢出：隐藏；
}
.文本{
边缘顶部：1米；
位置：绝对位置；
显示：内联块；
垂直对齐：顶部；
颜色：#222；
}

我的文字
如果需要元素根据其内容调整其高度，则可以将其设置为
display:block
或设置
height:auto
如果文本div位置为绝对位置，则不会影响包装的高度
 浏览器无法调整“栏”的高度，因为您正在使用“绝对”定义“文本”的位置。你能用下面的样式更新css样式，看看是否有用吗


.circle{
宽度：150px；
高度：150像素`
边界半径：50%；
背景：白色；
盒影：0.08像素rgba（0,0,0,8）；
左边距：-75px；
位置：相对位置；
浮动：左；
垂直对齐：中间对齐；
右边距：20px；
溢出：隐藏；
}
.文本{
边缘顶部：1米；
垂直对齐：顶部；
颜色：#222；
}
由于“位置：绝对”属性，文本在栏下不起作用。看看其余的，但不要真正理解你的问题。。编辑：嗯，酒吧的高度似乎在增加。重叠问题在哪里都找不到。但我可能不完全明白你想做什么。看起来对吗？或者你想让它看起来像你上一篇文章中的样子？是的，我无法让代码片段看起来像在开发服务器上那样。我不明白。文本应位于条内（首先）