How to create a circle and a bar that overlap with

问题:

For a user profile I'm trying to create a circular image plus a horizontal bar with the same height as the image. Also, it should be responsive. It should look as in the image below. In the black bar there will be text.

Could someone please help me with the correct CSS?
So far I have the code below but this already goes wrong in that the black bar is below the circle and not next to it. But also I don't know how to make the black bar start exactly in the middle of the image, to have the image on top, and to have text in the black bar start sufficiently to the right (while being responsive to screen size).

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

In my CSS file:

.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;
}

回答1:

you could use figure and figcaption to structure your html.

Inline-block, vertical-align and margin to set image aside text

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>

回答2:

The idea is - (1) set margin-left:50px on the container, and margin-left:-50px on the avatar inside. (2) set the bio as a table, so we can use the vertical alignment feature to middle the text.

JSFIDDLE DEMO

body {
    background: silver;
}
.user {
    height: 100px;
    background: #222;
    margin-left: 50px;
}
.avatar {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin-left: -50px;
}
.bio {
    display: table;
    height: 100px;
    color: #fff;
}
.bio p {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    margin: 0;
}

<div class="user">
    <img class="avatar" src="http://i.imgur.com/9pnkFjf.jpg" />
    <div class="bio"><p>John Doe is an anonymous character.</p></div>
</div>

回答3:

You forgot to absolutely position the title bar.

http://codepen.io/fontophilic/pen/LVzbVM?editors=110

I'm using SCSS in my pen, but here is the compiled 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;
}

回答4:

<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;
}

http://codepen.io/sajrashid/pen/yNzVJz