html - 没有绝对位置的div中div的绝对位置

Question

我把我的问题弄得一团糟以便于看到它:

https://jsfiddle.net/6jzb09nd/

我有一系列嵌套的 div。在巢的最底部，我想要一个绝对定位的 div，这样我就可以将它居中放置在它的父 div 中。

当它是页面上唯一的东西时，它可以找到，但当我开始添加其他元素时，定位就会变得一团糟。

在 fiddle 中，如果您取消注释“//float:left”，您可以看到定位中断。

代码如下:

.col-sm-2,
.col-sm-10 {
  //float:left;
}

.leftnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #393;
  position: relative;
  border: 0px solid black;
}

.rightnumouter {

  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #C33;
  position: relative;
  border: 0px solid black;
}

.leftnuminner {
  color: #000;
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rightnuminner {
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lefttextouter {
  background: #3C9;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 0;
  position: relative;
}

.righttextouter {
  background: #C69;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 .2vw;
  position: relative;
}

.lefttextinner {
  color: #000;
  margin: 0 .5vw 0 0;
}

.righttextinner {
  color: #000;
  margin: 0 1vw 0 0;
}

<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
  <div class="preview">
    <div class="databubble">
      <div class="leftnumouter">
        <div class="leftnuminner">5
        </div>
      </div>
      <div class="lefttextouter">
        <div class="lefttextinner">Sales
        </div>
      </div>
    </div>
    <div class="databubble">
      <div class="rightnumouter">
        <div class="rightnuminner">3
        </div>
      </div>
      <div class="righttextouter">
        <div class="righttextinner">Orders
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

由于带有 float 的元素折叠到它的内容，你需要给它一个宽度

.col-sm-2,
.col-sm-10 {
  float:left;
  width: 100%;
}

.leftnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #393;
  position: relative;
  border: 0px solid black;
}

.rightnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #C33;
  position: relative;
  border: 0px solid black;
}

.leftnuminner {
  color: #000;
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rightnuminner {
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lefttextouter {
  background: #3C9;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 0;
  position: relative;
}

.righttextouter {
  background: #C69;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 .2vw;
  position: relative;
}

.lefttextinner {
  color: #000;
  margin: 0 .5vw 0 0;
}

.righttextinner {
  color: #000;
  margin: 0 1vw 0 0;
}

<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
  <div class="preview">
    <div class="databubble">
      <div class="leftnumouter">
        <div class="leftnuminner">5
        </div>
      </div>
      <div class="lefttextouter">
        <div class="lefttextinner">Sales
        </div>
      </div>
    </div>
    <div class="databubble">
      <div class="rightnumouter">
        <div class="rightnuminner">3
        </div>
      </div>
      <div class="righttextouter">
        <div class="righttextinner">Orders
        </div>
      </div>
    </div>

  </div>
</div>

或者多设置几条规则让一切正常运行

.preview {
  overflow: hidden;
  white-space: nowrap;
}
.databubble {
  display: inline-block;
}

示例

.col-sm-2,
.col-sm-10 {
  float:left;
}
.col-sm-2:after,
.col-sm-10:after {
  content: '';  
  clear: both;
  display: block;
}

/*  added these 2 rules  */
.preview {
  overflow: hidden;
  white-space: nowrap;
}
.databubble {
  display: inline-block;
}

.leftnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #393;
  position: relative;
  border: 0px solid black;
}

.rightnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #C33;
  position: relative;
  border: 0px solid black;
}

.leftnuminner {
  color: #000;
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rightnuminner {
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lefttextouter {
  background: #3C9;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 0;
  position: relative;
}

.righttextouter {
  background: #C69;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 .2vw;
  position: relative;
}

.lefttextinner {
  color: #000;
  margin: 0 .5vw 0 0;
}

.righttextinner {
  color: #000;
  margin: 0 1vw 0 0;
}

<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
  <div class="preview">
    <div class="databubble">
      <div class="leftnumouter">
        <div class="leftnuminner">5
        </div>
      </div>
      <div class="lefttextouter">
        <div class="lefttextinner">Sales
        </div>
      </div>
    </div>
    <div class="databubble">
      <div class="rightnumouter">
        <div class="rightnuminner">3
        </div>
      </div>
      <div class="righttextouter">
        <div class="righttextinner">Orders
        </div>
      </div>
    </div>

  </div>
</div>