使用 css 定位 div：绝对定位 div 的布局问题

Question

下面的代码显示了一个圆加一个条，使用构建。我遇到的问题是 bar 在实践中的固定高度等于 circle 的高度。我猜这是因为 absolute inline-block。但是，我似乎需要 absolute inline-block 因为没有它们 text 被放置在栏下方而不是栏内。

我遇到的问题是，如果 text div 中的文本不适合 bar（太多文本），文本会在栏下方运行（所以酒吧的高度没有扩大）。第二个问题是，如果 bar 中的文本很少，bottom-half 会与 bar 重叠。我该如何针对这些问题调整我的代码？

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

在代码片段中，文本 "My text" 显示在栏下方，而在我的应用程序中它显示在栏内。我不知道原因。可能是因为来自 bootstrap 的容器 div，代码段可能不会这样处理它。

Answer 1

如果您需要一个元素根据其内容调整其高度，那么您可以将其设置为 display: block 或设置 height: auto.

Answer 2

如果text-div位置是绝对的，不会影响wrapper的高度。

Answer 3

浏览器无法调整 'bar' 的高度，因为您正在使用 'absolute' 定义 'text' 的位置。您能否使用以下样式更新 css 样式，看看是否有帮助？

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

使用 css 定位 div：绝对定位 div 的布局问题

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

html

css

css-shapes