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

Question

下面的代码显示了使用上一篇文章构建的圆圈和条形图。 我遇到的问题是，实际上， bar的固定高度等于circle的高度。 我猜这是因为absolute inline-block 。 但是，我似乎需要absolute inline-block因为如果没有它们， text将放置在条下面而不是内部。

我遇到的问题是，如果text div中的text不适合bar （太多文本），则该文本将在bar下方运行（因此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> 

在代码段中，文本“我的文本”显示在栏的下方，而文本则显示在我的应用程序的栏内。 我不知道原因。 也许是由于引导程序中的容器div导致的，此代码段可能未进行相应处理。

Answer 1

如果text-div位置是绝对的，则不会影响包装器的高度。

Answer 2

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

Answer 3

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