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

0

では始めましょう！

フロートするたびに、親が壊れる傾向があります。私は知っています、子供たちは両親が壊れたままになります.. それは私たちが自然に持っている習慣です.

これを修正するために、私は常に「clear」というクラスを作成し、クリアしたいときに div を付けるだけです! クリアクラスはほぼどこでも再利用できるため、overflow: hidden を実行するよりも便利だと思います。

//css
.clear { clear: both; }

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

わかりました、それでその問題は解決しました。

div の高さを行うには、jQuery を使用するとそれほど複雑ではありません。

これで説明を続けることもできますが、1 分ほどかかります。このチュートリアルに従ってください:

デモ：

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

論文：

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

ただし、クリックする代わりに、ドキュメントの準備ができたら実行してください。

于 2013-11-15T10:58:30.773 に答える