没有绝对位置的div内div的绝对位置

Question

我轻易地看到了我的问题：

https://jsfiddle.net/6jzb09nd/

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

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

如果你取消注释“// float：left”，你可以看到定位中断。

以下是代码：

{{1}}

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>