关于html：设置父级＆lt; div＆gt;的边框


Set border of parent <div> depending on 2 child <div>

本问题已经有最佳答案，请猛点这里访问。

我想在一个周围加上2个子元素。目前，绿色边界只是在顶部，而不是在集装箱周围。你能告诉我怎么解决这个问题吗？

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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
}
1
2
3
4
5
6
7
8
9
10
11
12
            key
       
   
   
       
            value
       
       
            value
       
       
            value

相关讨论

你的.frameDIV高度变为零，因为除了浮动的DIV子级之外没有其他内容，这就是CSS的工作方式。将这部分代码添加到您的.frame类中

1
2
3
.frame{
    overflow: hidden;
}

使用overflow: hidden;将创建块格式上下文。它将呈现块盒，其中的浮点数相互作用。

更多信息：块格式上下文

相关讨论

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

1
2
3
.frame {
    overflow: hidden;
}

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

1
2
3
4
5
.frame:after {
    content: '';
    display: block;
    clear: both;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
      key
   
 
 
   
      value
   
   
      value
   
   
      value

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