gpt4 book ai didi

jquery - 在 jQuery 中增加 div 的问题(相对和绝对 div)

转载 作者:太空宇宙 更新时间:2023-11-03 19:04:48 24 4
gpt4 key购买 nike

我有一个包含一些随机图片的父 div,这些图片位于大约 7 个或更多的子 div 中。我的目标是在子 div 随机填充时让父 div 扩展。注意子 div 可以是 0 到 10 或更多。我遇到的问题是父 div 没有增长。我尝试使用 css 和 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>

希望下面的图片能帮助你弄清楚我的目标是什么

enter image description here

最佳答案

你在漂浮你的照片,对吧?读这个:http://www.quirksmode.org/css/clearing.html

float 导致他们的 parent “忘记了元素”,因此没有展开。

总结:将 overflow: auto; 添加到父级,如下所示:

.parent {overflow: auto;}

关于jquery - 在 jQuery 中增加 div 的问题(相对和绝对 div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10767248/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com