0

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;
}

Javascript

    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);
};

実例はこちら

どんな助けでも大歓迎です。

4

2 に答える 2

2

ラッパー div で「.block」要素を囲む場合は、削除する必要があります

position: absolute;

代わりに追加します：

display: inline-block;
margin: 32px;

「.clear」要素を削除することもできます。

于 2013-11-06T11:46:17.020 に答える