3

我有一个 2 列网格。在第 1 列中，将有一个 div 的多个实例。在一个 div 内有两个绝对定位的 div - 一个数字和一个描述。出于某种原因，当我有多个 div 时，它们会相互堆叠，这是因为“模板”div 没有高度。

为什么其中的内容不会自动生成高度div？

.main {
  position: relative;
  margin: 25px 0;
  display: block;
}

.col1 {
  width: 200px;
  position: absolute;
  left: 0;
}

.col2 {
  width: 200px;
  position: absolute;
  right: 0;
}

.indicator {
  width: 10px;
  height: 10px;
  background-color: #0f0;
  color: #454;
  position: absolute;
  left: 0;
}

.text {
  position: absolute;
  right: 0;
}

.box {
  position: relative;
}
<div class="main">
  <div class="col1">
    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

  </div>

  <div class="col2">
    Col 2 content.
  </div>
</div>

小提琴：http: //jsfiddle.net/techydude/UcFXX/1/

这是一个非常基本的问题，但我宁愿理解问题背后的原因，而不是通过增加高度来解决问题。

4

1 回答 1

3

绝对定位将元素从“流”中移除，因此就其父级而言，它并不真正存在，也不会计算为父级高度的一部分。

于 2012-11-29T22:23:03.837 回答