Question

我希望<div>周围有2个子元素的边框。此时绿色边框位于顶部，而不是<div>容器周围。你能告诉我如何解决这个问题吗？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你的.frame div高度变为零，因为除了浮动的div子项之外没有其他内容，以及CSS的工作原理。将此部分代码添加到.frame类

.frame{
    overflow: hidden;
}

使用overflow: hidden;将创建块格式化上下文。它将渲染浮动框相互作用的块框。

更多信息：Block formatting context

Answer 2

问题是你的框架没有高度，因为所有的孩子都漂浮着。您可以通过将overflow: hidden;添加到框架类来解决此问题。

Answer 3

在儿童身上使用float时，不要忘记在父元素上设置布局。设置布局有很多种方法。例如

.frame {
    overflow: hidden;
}

或者您可以使用:after伪元素：

.frame:after {
    content: '';
    display: block;
    clear: both;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: