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

【问题标题】：Positioning of div's using css: layout issue with absolute positioned div使用 css 定位 div：绝对定位 div 的布局问题
【发布时间】：2015-06-20 09:02:18
【问题描述】：

下面的代码显示了一个圆圈和一个条形，使用 previous post 构建。我遇到的问题是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>

在代码 sn-p 中，文本“我的文本”显示在栏下方，而它显示在我的应用程序的栏内。我不知道原因。也许是因为来自引导程序的容器div，sn-p 可能不会这样处理。

【问题讨论】：

由于“position:absolute”属性，文本在条形下方进行了放克。看看其余的，但并没有真正得到你的问题.. 编辑：好吧，酒吧的高度似乎在增加。重叠问题无处可寻。但我可能不完全理解你想要做什么。 fiddle.jshell.net/mnocmL7r 看起来对吗？还是您希望它看起来像您之前的帖子？
是的，我无法让 sn-p 看起来像它在开发服务器上的样子。我不明白。文本应位于栏内（开头）

标签： html css css-shapes

【解决方案1】：

浏览器无法调整“栏”的高度，因为您正在使用“绝对”定义“文本”的位置。能否请您使用以下样式更新 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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：