[英]position:absolute is floating over the element
只是想知道我如何停止position:absolute元素以停止在wapper div上浮動
html
<?php
echo "<div class='pinWrapper'>";
echo "<h2>New Arrivals</h2>";
echo "<br />";
$all_products = get_all_products();
while ($product = mysql_fetch_array($all_products))
{
echo "<div class='block'>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>";
$Id = $product['Id'];
$limit = 1;
$img_set= get_images_by_id($Id, $limit);
while ($img = mysql_fetch_array($img_set))
{
echo "<img src='sto/" . $img["image_name"] ."'>";
}
echo "</a>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>" . $product['item_name'] . "</a>";
echo "<div class='hpDis'>" . $product['sm_description'] . "</div>";
echo "</div>";
echo "<div class='clear'></div>";
}
echo "</div>";
?>
CSS
.pinWrapper {
position: relative;
margin: 0 auto;
width:720px;
}
.block{
position: absolute;
background: #eee;
padding: 1px;
width: 210px;
border: 1px solid #ddd;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.block img {
width: 200px;
height: auto;
}
Java腳本
var colCount = 0;
var colWidth = 0;
var margin = 20;
var windowWidth = 800;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
//windowWidth = $(window).width();
colWidth = $('.block').outerWidth();
blocks = [];
console.log(blocks);
colCount = Math.floor(windowWidth/(colWidth+margin*2));
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':leftPos+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
這里的例子
任何幫助是極大的贊賞。
如果您希望包裝div包含“ .block”元素,則必須刪除
position: absolute;
並添加:
display: inline-block;
margin: 32px;
您也可以刪除“ .clear”元素。
添加z-index:-999;
這將阻止它超越其他任何事物
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.