1

私は、約7以上の子divにあるランダムな画像を含む親divを持っています。私の目的は、子 div がランダムに入力されたときに親 div を展開することです。子 div は 0 から 10 以上になる可能性があることに注意してください。私が抱えている問題は、親divが成長しないことです。私はcssとjqueryを使ってみましたが、これは私がこれまでに持っているものですjquery

var margin = 5;

var blocks = [];
function align() {
$('.block').each(function(i){
    var min = Array.min(blocks);
    var index = $.inArray(min, blocks);
    var posleft = margin+(index*(300+margin));
    $(this).css({
        'left':(posleft+2)+'px',
        'top':min+'px'
    });
    blocks[index] = min+$(this).outerHeight()+margin;
}); 
}

function divlayOut() {
blocks = [];
for(var i=0;i<3;i++)
{
    blocks.push(margin);
}
align();
}

Array.min = function(array) {
return Math.min.apply(Math, array);
};

html

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
.block{
width: 250px;
float:left; 
position:absolute;
}
.parent{
width: 800px; 
float:left; 
padding:10px 0px 0px 10px;
position:relative; 
}
</style>

</head>
<body onload="align();">
<div class="parent">
<div class="block">pic1 size H 100 x W 80</div>
<div class="block">pic1 size H 80 x W 800</div>
<div class="block">pic1 size H 300 x W 100</div>
<div class="block">pic1 size H 110 x W 90</div>
</div>

下の写真が私の目的を明確にするのに役立つことを願っています

ここに画像の説明を入力

4

3 に答える 3

0

子ブロックは絶対配置されているため、親ブロックは展開されません。Jquery を使用して親ブロックの高さを手動で計算する (child_block_height、行ごとのブロック、block_width パラメーターを使用) か、子ブロックの float:left プロパティを使用できます (非絶対配置)。

もう 1 つの方法は、インライン ブロック要素を使用することです: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

私は通常、次の方法を使用します。

<style>
  .parent {
    overflow:hidden;
    *height:1%;
  }
  .block {
    float:left;
    width:100px;
    height:100px;
  }
</style>
<div class="parent">
  <div class="block"></div>
  <div class="block"></div>
</div>
于 2012-05-26T15:05:35.870 に答える
0

子 divは絶対配置する必要がありますか?

float:leftcssclearfixトリックを使用するこのフィドルを見てください。

http://jsfiddle.net/5FXs2/

于 2012-05-26T16:59:10.823 に答える
0

あなたはあなたの写真を浮かんでいますよね？これを読んでください: http://www.quirksmode.org/css/clearing.html

フロートは、親が「要素を忘れる」原因となっているため、展開されません。

要約: 次overflow: auto;のように親に追加します。

.parent {overflow: auto;}
于 2012-05-26T15:01:18.750 に答える