3

有一个父 div 和 3 个子 div。只知道 child2 的身高。希望 child1 和 child3 具有相同的高度，因为高度降低了。父母的边界也正在崩溃。希望父母的边框在孩子周围可见。粘贴代码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>
4

2 回答 2

4

在这里把小提琴overflow:hidden交给你的父母，因为孩子是漂浮的。

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

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

于 2013-11-15T10:50:32.317 回答
0

好的，让我们开始吧！

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

为了解决这个问题，我总是创建一个名为“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

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

于 2013-11-15T10:58:30.773 回答