html - CSS - 父 div 不充当父级

Question

我目前正在尝试学习 CSS。到目前为止一切顺利，但是我遇到了一个问题，直到现在我还没有遇到过问题。

我有一个 <div>包含另外两个 <div>的。 我期待“ parent ”<div>充当 parent (自动高度等)并实际“包含”两个 child <div>的。

我的代码:

<div class="formpair">
    <div class="formlabel formitem">
        Parent Section:
    </div>
    <div class="formcontrol formitem">
        <select>

        </select>
    </div>
</div>

我的 CSS:

.formitem {
    position: relative;
    float: left;
}
.formlabel {
    width: 200px;
}
.formcontrol {
    position: absolute;
    left: 200px;
}
.formpair {
    clear: both;
    margin-bottom: 4px;
    height: auto;
    position: relative;
    display: block;
}

我尝试过使用“位置”和“显示”进行试验，但无济于事...... 任何帮助表示赞赏!

Answer 1

除非有特殊需要让子元素 float ，否则我使用 display:inline-block 提供了不同的解决方案。我还清理了您的 CSS 以删除一些不必要的膨胀，这些膨胀可能会在您的文档后面导致层次结构问题。

您可以在此处查看修复的工作示例:JSFiddle

这是可以正常显示的 css:

.formitem {
    display:inline-block;
}

.formlabel {
    width: 200px;
}

.formpair {
    margin-bottom: 4px;
}

以下是您在使用以前的 CSS 时遇到的一些问题:

.formcontrol {
    position: absolute;
    left: 200px;
}

这段 CSS 被反对:

.formitem {
    position: relative;
    float: left;
}

因此 .formcontrol 不会因为抵制 CSS 而对您的文档产生任何影响。它被否决的原因是因为 CSS 是线性的并且会从头到尾阅读您的文档。在您的 HTML 中，您首先告诉 CSS 应用 .formcontrol，然后在给它第二个类 .formitem 之后立即:

<div class="formcontrol formitem">

其他 CSS 声明，如:

height: auto;
position: relative;
display: block;

在您的示例中似乎不需要，因为默认设置对于此应用程序可以很好地工作，并且可能会对您的元素施加限制声明，这可能会导致 future CSS 修改出现问题。

如果您的意图是使用float:left，那么@rdubya 评论了此链接关于如何在 float 元素下正确清除修复:clearfix