Question

我有一个非常基本的html / css问题。

我有一个2列网格。在第1列中，将有一个div的多个实例。在一个div中，有两个div绝对定位 - 数字和描述。出于某种原因，当我有多个div时，它们堆叠在一起，这是因为'template'div没有高度。有人能告诉我为什么高度不是由该div内的内容自动生成的吗？

HTML：

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

CSS：

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

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

这是一个非常基本的问题，但我宁愿理解这个问题背后的原因而不通过添加高度来创建一个解决方法。谢谢你的帮助！

Answer 1

绝对定位会从“流”中移除元素，因此就其父级而言，它实际上并不存在，并且它不会作为父级高度的一部分进行计算。

相对div不生成高度

1 个答案: