позиция: абсолютное плавающее над элементом

0

просто хотел бы знать, как я могу остановить позицию: абсолютный элемент, чтобы остановить флотировку по 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);
};

Живой пример здесь

Любая помощь приветствуется.

Теги:

2 ответа

2

Если вы хотите, чтобы оболочка div закрывала элементы ".block", вы должны удалить

position: absolute;

и вместо этого добавьте:

display: inline-block;
margin: 32px;

Вы также можете удалить элементы ".clear".

  • 0
    дисплей: блок; плыть налево; был бы мой выбор. Определенно удалите все очищает.
  • 0
    Это будет по-прежнему переполнять div-оболочку, поскольку float не увеличивает их родительский элемент. Он должен будет добавить ясность: слева; после последнего блока. Вместо этого отобразите: inline-block; красиво оборачивается при увеличении родительского div.
Показать ещё 2 комментария
-1

добавить z-index:-999; и это остановит его от превышения всего остального

Ещё вопросы

Сообщество Overcoder
Наверх
Меню