Positioning of div's using css: layout issue with absolute positioned div

问题

The code below shows a circle plus a bar, built using a previous post. The problem I'm experiencing is that the bar in practice has a fixed height equal to the circle's height. I guess this is because of the absolute inline-block. However, I seem to need absolute inline-block because without them text is placed below the bar instead of inside it.

The problem I'm experiencing is that if the text within the text div does not fit within bar (too much text), the text runs belows the bar (so the heigth of the bar is not expanding). Second problem is that if there's very little text within bar, the bottom-half overlaps with bar. How can I adjust my code for these problems?

.tophalf {
  width: 100%;
  background: #F1F3F2 none repeat scroll 0% 0%;
  padding: 5em;
}
.bar {
  background: #333;
  margin-left: 75px;
  min-height: 150px;
}
.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  margin-left: -75px;
  position: relative;
  vertical-align: middle;
  margin-right: 20px;
  overflow: hidden;
}
.text {
  margin-top: 1em;
  position: absolute;
  display: inline-block;
  vertical-align: top;
  color: #222;
}

<div class="tophalf">
  <div class="container">
    <div class="col-md-12">
      <div class="bar">
        <div class="circle"></div>
        <div class="text">My text</div>
      </div>
    </div>
  </div>
</div>

<div class="bottom-half"></div>

In the code snippet the text "My text" shows up below the bar, while it shows up inside bar in my app. I don't know the cause. Perhaps it is because of the container div from bootstrap, which the snippet doesn't perhaps process as such.

回答1:

Browser is not able to adjust the height of the 'bar' because you are defining a location for the 'text' using 'absolute'. Can you please update the css style using the below one and see if it helps?

.circle {
  width: 150px;
  height: 150px;`
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  margin-left: -75px;
  position: relative;
  float: left;
  vertical-align: middle;
  margin-right: 20px;
  overflow: hidden;
}
.text {
  margin-top: 1em;
  vertical-align: top;
  color: #222;
}