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

这个问题在这里已经有了答案：

你如何阻止浮动元素的父母崩溃？ [复制] 16个回答

---

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

.frame{
    overflow: hidden;
}

使用overflow: hidden; 会创建一个块格式上下文。 它会渲染浮动块相互交互的块。

更多： 块格式上下文

---

问题是你的框架没有得到高度，因为所有的孩子都在浮动。 你可以通过添加overflow: hidden;来解决这个问题overflow: hidden; 到框架类。

---

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

.frame {
    overflow: hidden;
}

或者你可以使用:after伪元素之后：

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

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

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

链接地址: http://www.djcxy.com/p/88429.html

上一篇: Set border of parent <div> depending on 2 child <div>

下一篇: Background colour of <div> containing <ul>