6

http://jsfiddle.net/Lijo/ZkLg6/5/に示すように、div を動的に追加しています。

親の #mainHolder div は、子要素が追加されたときに幅を広げていません。その結果、子は親の div を壊します。親 div の高さを調整することで、これをどのように克服できますか?

ここに画像の説明を入力

jQuery

$('input').click(function()
{
 var existingDirectChildrenDivCount = $('#mainHolder > div').size();



 if( existingDirectChildrenDivCount % 3 == 0)
 {
      $('#mainHolder').append ("<div class='firstDiv'> A  </div>")
 }

 if( existingDirectChildrenDivCount % 3 == 1)
 {
      $('#mainHolder').append ("<div class='secondDiv'> B </div>")
 }

 if( existingDirectChildrenDivCount % 3 == 2)
 {
      $('#mainHolder').append ("<div class='thirdDiv'> C  </div>")
 }

}
);

HTML

<html>

   <input type="submit" value="Add" />
   <br/>   
   <div id="mainHolder">
   S    
  </div>

  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>

</html>

CSS

#mainHolder
{
    width: 400px;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:auto;
}

.firstDiv
{
    float: left;
    display: inline;
    background-color: #f5B5f5;
    height:100px;
}

.secondDiv
{
    float: left;
    display: inline;
    background-color: #FF007F;
    height:100px;
}

.thirdDiv
{
    float: left;
    display: inline;
    background-color: Pink;
    height:100px;
}
4

8 に答える 8

20

オーバーフローを追加:自動

#mainHolder
{
    width: 400px;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:auto; overflow:auto
}

デモはこちらhttp://jsfiddle.net/ZkLg6/11/

于 2012-09-17T10:41:19.653 に答える
2

これを試してください：http：//jsfiddle.net/ZkLg6/7/

修正は、浮動要素をクリアするdivを使用することです。動的要素をmainHolder内のネストされたdivにプッシュして、cleardivが常にそれらの下にあるようにする必要がありましたが、正常に機能します。

于 2012-09-17T10:43:36.723 に答える
1

オーバーフローを追加してみてください：auto; #mainHolderのCSSに。

于 2012-09-17T10:43:07.070 に答える
1

解決策は、＃mainHolderの最後にを追加し、その前に要素を挿入することです（または、新しいdivを追加するたびに、要素を削除して再度追加し続けます。これは、フロートを使用しているためです。他のdivからのフロートはすべて期待どおりに機能するはずです。オーバーフロー：自動;ソリューションも優れており、より単純に見えます。

于 2012-09-17T10:43:31.633 に答える
0

次のようなものを試してください。

#mainHolder
{
    min-width: 400px;
    float:left;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:20px;
}

ここでの唯一の問題は文字「S」ですが、それをいくつかのdiv内に置くことができます。着色されたもののように。これが更新されたJSフィドルです。

うーん。ただし、HEIGHTではなくWIDTHを増やしたい場合は、これで機能します。高さを増やしたい場合は、overflow：hidden;を追加するだけです。さらに、cssにはさらにいくつかの変更があります。JSfiddleを見てください

于 2012-09-17T10:44:29.860 に答える
0

これをチェックしてくださいhttp://jsfiddle.net/ZkLg6/19/
私が使用したoverflow:hidden 

#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto; overflow:hidden;
}
于 2012-09-17T10:50:34.823 に答える
0

フローティングをクリアする必要があります。clear:both を持つ br のような要素を挿入することで、それを行うことができます。

動作させるために追加できるコードは次のとおりです。

$('#mainHolder').find("br").remove(); // remove already added br
$("<br>").css({clear : "both"}).appendTo($('#mainHolder')); // append a br after the last element.

jsFiddle を更新しました: http://jsfiddle.net/ZkLg6/13/

于 2012-09-17T10:47:56.517 に答える
-1

オーバーフローと高さの両方を自動に設定すると、親 div の offsetHeight が動的に更新されます!

于 2013-10-24T14:45:04.683 に答える