CSS父div边框和高度折叠答案

【问题标题】：CSS parent div border and height collapsingCSS父div边框和高度折叠
【发布时间】：2013-11-15 10:44:18
【问题描述】：

有一个父 div 和 3 个子 div。只知道 child2 的身高。希望孩子 1 和孩子 3 的高度与高度降低的高度相同。父母的边界也正在崩溃。希望父母的边框在孩子周围可见。贴上代码http://jsfiddle.net/586Cr/

提供以下代码。

<html>
  <head>
    <style>
      #parentt{
        background-color:#000000;
        border:4px solid #0000FF;
      }
      #child1{
        background-color:#000000;
        border:4px solid #FF0000;
        float:left;
        width:25%;
      }
      #child2{
        background-color:#000000;
        border:4px solid #FF0000;
        float:left;
        width:30%;
        height:100px;
      }
      #child3{
        background-color:#000000;
        border:4px solid #FF0000;
        width:25%;
        float:left;
      }
      .trans60 {
         zoom: 1;
         filter: alpha(opacity=60);
         opacity: 0.6;
      }
      .trans100 {
         zoom: 1;
         filter: alpha(opacity=100);
         opacity: 1.0;
      }
    </style>
  </head>
  <body>
    <div id="parentt">
      <div id="child1" class="trans60"> child1</div>
      <div id="child2" class="trans100">child2</div>
      <div id="child3" class="trans60">child3</div>
    </div>
  </body>
</html>

【问题讨论】：

我认为 op 得到了比这更多的答案！

标签： css

【解决方案1】：

在这里将fiddle 给你的父母fiddle，因为孩子是浮动的。

简单地说 http://www.w3.org/TR/CSS2/visuren.html#block-formatting

在元素上设置overflow: hidden 会导致创建新的浮动上下文，因此在应用了overflow: hidden 的元素内浮动的元素将被清除。

【讨论】：

非常感谢您提供的信息。只知道中间 div 的高度。在小提琴链接中，您已将所有 div 设置为 100px。
哦，你需要父母的边框环绕它的孩子，即使它的高度不同。？不显示任何空格..！
@Arav css3 flex-box 可以帮助你确定它对 bcs 还没有使用有帮助..check

【解决方案2】：

好的，让我们开始吧！

任何时候你漂浮，它往往会打破父母。我知道，孩子离开父母破产......这只是我们在自然界中的一种习惯。

为了解决这个问题，我总是创建一个名为“clear”的类，并在我想清除时附加一个 div！我发现这比做一个溢出更有用：隐藏，因为 clear 类几乎可以在任何地方重用。

//css
.clear { clear: both; }

// calling it up after the 3 children
<div class="clear"></div>

好的，这样就解决了这个问题。

现在做 div 高度，用一些 jQuery 并不过分复杂。

现在我可以继续尝试解释这一点，但这需要一分钟。遵循本教程：

演示：

http://www.cssnewbie.com/example/equal-heights/plugin.html

文章：

http://www.cssnewbie.com/equalheights-jquery-plugin/#.UoX-neKrTIU

但是，不是点击，而是在文档准备好时进行。

【讨论】：