Question

i have a parent div that contains some random pictures that is in child divs about 7 or more. my aim is to have the parent div expand when the child divs populate it at random. note child divs can be 0 to 10 or more. the problem im having is that the parent div does not grow. i try using css and jquery and this is what i have so far 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( 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>

希望下面的画面能帮助澄清我的目标

""https://i.sstatic.net/SBQ5X.png" alt="此处的内置图像描述"/ >

Answer 1

读这个:http://www.quirksmode.org/css/rail.html

浮标使他们的父母忘记了这些元素,因此没有扩大。

概括: 添加 < code> overflow: 自动; 到父母, 类似 :

.parent {overflow: auto;}

Answer 2

由于子区块是绝对位置, 父区块永远不会扩展。您可以使用 Jquery 手动计算母区块的高度( 使用 child_ block_ leight, 每行的区块和 block_ width 参数), 或者您可以使用浮点 : 子区块的左属性( 非偏移位置) 。

另一种方法是使用内嵌块块元素: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>

Answer 3

儿童 divs < 坚固 > 是否需要绝对定位?

看看这个使用 float: left 和 cs clearfix 技巧的小提琴。

http://jsfiddle.net/5FXs2/" rel="no follow" >http://jsfiddle.net/5FXs2/

友情链接