在jQuery（相對和絕對div）中增長一個div的問題

我有一個父級div，其中包含一些隨機圖片，在子div大約7或更多。我的目標是當孩子們隨機填充它時，讓父母的div擴大。注意子div可以是0到10或更多。即時通訊的問題是，父div不增長。我嘗試使用CSS和jQuery，這是我迄今爲止 jQuery的在jQuery（相對和絕對div）中增長一個div的問題

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>

希望下面的這些圖片有助於清除我的目的是什麼

enter image description here

來源

2012-05-26 user570782

你正在浮動你的p呃，對嗎？閱讀此：http://www.quirksmode.org/css/clearing.html

浮游物正在造成他們的父母'忘記元素'，因此不擴大。

總結：添加overflow: auto;父，就像這樣：

.parent {overflow: auto;}

來源

2012-05-26 15:01:18

試過這個相同的結果..不起作用。只有不同的是父母不擴大。我甚至刪除他們的浮動 – user570782

然後你可以發佈測試用例嗎？ –

在哪裏和如何,,我必須添加如果不使用jquery它的工作，但我需要juery幫助與對齊 – user570782

因爲孩子塊是絕對定位的父塊將永遠不會擴大。您可以使用Jquery手動計算父塊的高度（使用child_block_height，每行塊和block_width參數），也可以使用子塊的float：left屬性（非絕對定位）。

另一種方法是使用inline-block的元素：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-26 15:05:35 odiszapc

試過這個相同的結果..不起作用。只有不同的是父母不擴大。我甚至從他們刪除浮動..我必須添加，如果不使用jquery它的作品，但我需要juery幫助與對齊 – user570782

做孩子的div 需要要絕對定位？

看看這個小提琴，它使用float:left和css clearfix絕招。

http://jsfiddle.net/5FXs2/

來源

2012-05-26 16:59:10

當我讓孩子絕對它不工作。他們需要爲了讓jquery採取適當效果 – user570782

jQuery的目的是什麼？它似乎只是用於佈局目的。如果是這樣的話，爲什麼要使用jQuery而不是正確的HTML和CSS應用程序？ –