根据 2 个子 <div> 设置父 <div> 的边框 [重复]

Posted 2023-03-06

【中文标题】根据 2 个子 <div> 设置父 <div> 的边框 [重复]

【英文标题】：Set border of parent <div> depending on 2 child <div> [duplicate]

【发布时间】：2017-01-27 01:51:18

【问题描述】：

我想要一个带有 2 个子元素的 <div> 周围的边框。目前，绿色边框位于顶部，而不是 <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>

【问题讨论】：

如果您不知道它是如何工作的，请不要使用浮点数。

从这里选择一个选项：***.com/questions/211383/…

@MarcosPérezGude 你如何建议创建一个平等的结构？

你有很多技术，inline-block、flexbox、table-cells 等等。但是使用浮动布局让你为该代码编写特定的 html+CSS，变得疯狂地改变它未来。

【参考方案1】：

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

.frame
    overflow: hidden;

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

更多信息：Block formatting context

【讨论】：

著名的避免花旗骰的危险技巧。最好的解决方案是不要在布局中使用浮动，只使用它来浮动真正的浮动元素

但是，既然这解决了问题，我的赞成票是给你的:)

为了改进您的答案，您可以告诉 OP 为什么这是一个技巧而不是解决方案，以及为什么问题解决了。您将获得更多的赞成票；）

【参考方案2】：

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

【参考方案3】：

在子元素上使用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>