Html 如何创建与css重叠的圆和条？

对于用户配置文件，我尝试创建一个圆形图像加上一个与图像高度相同的水平条。而且，它应该是响应性的。它应该如下图所示。在黑条中将显示文本

有人能帮我找到正确的CSS吗
到目前为止，我有下面的代码，但这已经出了问题，因为黑条在圆圈下方，而不是在圆圈旁边。但我也不知道如何使黑条在图像的中间开始，使图像在顶部，并使黑条中的文字开始充分地向右（同时响应屏幕大小）。 想法是：（1）在容器上设置

marginleft:50px

，在里面的化身上设置

marginleft:-50px

。（2） 将bio设置为表格，这样我们就可以使用垂直对齐功能将文本居中

正文{
背景：银；
}
.用户{
高度：100px；
背景：#222；
左边距：50像素；
}
.阿凡达{
浮动：左；
宽度：100px；
高度：100px；
边界半径：50%；
盒影：0.08像素rgba（0,0,0,8）；
左边距：-50px；
}
.生物{
显示：表格；
高度：100px；
颜色：#fff；
}
.bio p{
显示：表格单元格；
垂直对齐：中间对齐；
左侧填充：10px；
保证金：0；
}

约翰·多伊是个匿名人物

您忘了绝对定位标题栏

我在笔中使用了SCS，但这里是编译后的css：

.round {
  margin: 2em;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: block;
  margin: 2em;
  position: absolute;
  background-color: #000;
  left: 75px;
  top: 0;
  width: 100%;
  height: 150px;
  z-index: -1;
}

.text-bar p {
  position: relative;
  left: 75px;
  color: white;
}

html，正文{
宽度：100%；
身高：100%；
}
.圆圈{
边界半径：50%；
宽度：3em；
高度：3em；
背景色：红色；
}
.圆圈：之前{
左边距：1.5em；
内容：“；
显示：块；
位置：相对位置；
背景：黑色；
高度：3em；
宽度：500%；
z指数：-1；
}

---

您可以使用

图
和
figcaption
来构造html

内联块
，
垂直对齐
和
边距
将图像放在文本旁边


图{
左边距：50px；/*图像宽度的一半*/
背景：黑色；
盒影：0 0 1px；
边界半径：3px；
}
img{
边界半径：100%；
位置：相对；/*将其置于前面，也可以触发z索引*/
盒影：-1px 0 1px，1px 0 1px白色；/*随你喜欢*/
垂直对齐：中间对齐；
右：50px；/*从实际位置视觉移动*/
右边距：-40px；/*将文本拉到或推到一边*/
}
菲卡普顿{
显示：内联块；
垂直对齐：中间对齐；
颜色：白色；
}
p{
保证金：0；
}

这里有些文字距离图像10像素

还有更多

css3是一个“开关”按钮，但没有功能/动作？因此，css3圆角divs重叠？；）谢谢，这已经解决了很多问题。剩下两个问题：1）条中的文本放在条的下面而不是里面，尽管我有：
文本
文本。2） 即使将条的宽度设置为100%，它也比放置条的
div
宽（比
宽。有什么办法解决这两个问题吗？@Nick文本问题很容易解决-不确定宽度问题是什么意思。@Nick我算出了宽度问题-你可以从栏中删除
宽度：100%
，因为div是块级别的，它将占用容器的整个宽度，而不设置任何宽度，如wh至少，我在演示上做了。或者如果需要重置它，将其设置为
width:auto
。感谢Pangloss，如果我真的使用了你的代码，它就工作了，但是如果我根据自己的情况调整它，我就无法使它工作。但GCyrillus的回答是这样的。（毫无疑问，问题是我的实现，而不是你的代码。）@Nick没问题，我看了一下唯一的主要区别是它设置了相对位置+左负值，无论如何，你的代码肯定有问题，否则它们应该以同样的方式工作。顺便说一下，
/
是xhtml的东西，你不必在html5中使用它。谢谢，它可以工作了！我想知道“/”是什么因为在这一行的末尾，它是一个自动关闭的元素，比如br、hr、input。当使用的doctype是HTML4.01时，您不需要添加它（大写），当您使用html5时，它是可选的，但大多数时候html编码更像xhtml规则，更严格，这主要是一个实践问题
.round {
  margin: 2em;
  border-radius: 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: inline-block;
  background: #FFF;
  left: 222px; //Problem: not responsive. This block should start exactly halfway from the image.
  width: 100%;
}
.text-bar p {
  left: 250 px;
}

.round {
  margin: 2em;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: block;
  margin: 2em;
  position: absolute;
  background-color: #000;
  left: 75px;
  top: 0;
  width: 100%;
  height: 150px;
  z-index: -1;
}

.text-bar p {
  position: relative;
  left: 75px;
  color: white;
}

<div class="circle">
</div>


html,body{
  width:100%;
  height:100%;
 }
.circle{
 border-radius:50%;
 width:3em;
 height:3em;
 background-color: red;
 }
.circle:before{
margin-left: 1.5em;
content: " ";
display: block;
position: relative;
background: black;
height: 3em;
width: 500%;
z-index:-1;
}