html – 如何创建一个与css重叠的圆和条？

对于用户配置文件,我正在尝试创建一个圆形图像以及一个与图像高度相同的水平条.此外,它应该是响应.它应该如下图所示.在黑色栏中会有文字.

有人可以用正确的CSS帮助我吗？到目前为止,我有下面的代码,但这已经出错,因为黑条位于圆圈下方而不是旁边.但我也不知道如何让黑条准确地从图像中间开始,将图像放在顶部,并使黑条中的文字充分向右开始(同时响应屏幕尺寸) .

<div class="col-md-12 profile-topbar">
  <div class="round">
    <img src=<%= image_path('profile.gif') %>>
  </div>
  <div class="text-bar">
    ...
  </div>
</div>

在我的CSS文件中：

.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,.8);
  -webkit-Box-shadow: 0 0 8px rgba(0,.8);
  -moz-Box-shadow: 0 0 8px rgba(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;
}

解决方法

你可以使用figure和figcaption来构建你的html.

内联块,垂直对齐和边距将文本设置为文本

figure {
  margin-left:50px;/* half image width */
  background:black;
  Box-shadow:0 0 1px;
  border-radius:3px;
  }
img {
  border-radius:100%;
  position:relative;/* brings it at front,can trigger z-index too */
  Box-shadow:-1px 0 1px,1px 0 1px white ;/* whatever U like */
  vertical-align:middle;
  right:50px;/* move visually from real position */
  margin-right:-40px;/* pull or push text aside */
  }
figcaption {
  display:inline-block;
  vertical-align:middle;
  color:white;
  }
p {
  margin:0;
  }

<figure>
  <img src="http://lorempixel.com/100/100/people/9" />
  <figcaption>
    <p>some text here  10px away from image</p>
    <p>and more</p>
    </figcaption>
  </figure>