html - 根据 2 个子 <div> 设置父 <div> 的边框

Question

我想要 <div> 周围有一个边框有 2 个子元素。目前，绿色边框仅位于顶部，而不是遍布 <div> 周围。容器。你能告诉我如何解决这个问题吗？

在这里你可以看到我的代码:

.frame {
    border-style: solid;
    border-color: green;
    width: 500px;
}
.left {
    float: left;
    min-height: 20px;
    width: 200px;
    min-height: 20px;
}
.right {
    float: right;
    min-height: 20px;
    width: 300px;
}
.entry {
    height: 20px
}

<div class="frame">
    <div class="left">
        <div class="entry">
            key
        </div>
    </div>
    <div class="right">
        <div class="entry">
            value
        </div>
        <div class="entry">
            value
        </div>
        <div class="entry">
            value
        </div>
    </div>
</div>

Answer 1

您的 .frame div 高度变为零，因为除了 float 的 div 子级之外没有其他内容，这就是 CSS 的工作原理。将这部分代码添加到您的 .frame 类

.frame{
    overflow: hidden;
}

使用overflow:hidden;将创建一个 block 格式化上下文。它将渲染 block 框，其中 float 体彼此交互。

更多信息:Block formatting context