3

2列のグリッドがあります。列1には、1つのdivの複数のインスタンスがあります。1つのdivの中には、絶対に配置された2つの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 に答える