定位div使用css：布局问题与绝对定位的div [英] Positioning of div's using css: layout issue with absolute positioned div

问题描述

下面的代码显示了一个圆形加上一个条形图，使用上一篇文章。我遇到的问题是，在实践中 bar 的固定高度等于 circle 的高度。我想这是因为绝对 inline-block 。但是，我似乎需要 absolute inline-block ，因为没有它们 text



我遇到的问题是，如果 text

中的文本， code> div不适合 bar （文本太多），文本在条的下方运行（因此条的高度不会扩展）。第二个问题是，如果 bar 中有很少的文本，下半部与 bar 。如何调整我的代码以解决这些问题？

  .tophalf {width：100％背景：＃F1F3F2无重复滚动0％0％; padding：5em;}。bar {background：＃333; margin-left：75px; min-height：150px;}。circle {width：150px; height：150px; border-radius：50％;背景：白色; box-shadow：0 0 8px rgba（0，0，0，.8）; margin-left：-75px;位置：相对; 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>我的文字< / div> < / div> < / div> < / div>< / div>< div class =bottom-half>< / div>  

/ p>

在代码片段中，文本My text显示在栏下方，而在我的应用程序中显示在栏内。我不知道原因。也许这是因为容器 div 从引导程序，其中的代码片段可能不会这样处理。

解决方案

浏览器无法调整bar的高度，因为您正在使用absolute为文本定义位置。

  .circle {width：150px; height：150px;`border-radius：50％;背景：白色; box-shadow：0 0 8px rgba（0，0，0，.8）; margin-left：-75px;位置：相对; float：left; vertical-align：middle; margin-right：20px; overflow：hidden;}。text {margin-top：1em; vertical-align：top; color：＃222;}  

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.

解决方案

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

这篇关于定位div使用css：布局问题与绝对定位的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！