Question

我正在创建一个HTML程序，它有一个包含12个小div的主div，它们向左移动，当它们有换行符时，它们应该位于main的位置（0,0） DIV。我无法重新定位小div，它总是在线的末尾换行。

<!DOCTYPE>

<html>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <style type="text/css">
        div.micapa {
            /* Decoration */
            background-color: red;
            width:100px;
            height:100px;
            border: 4px ridge orange;
            font-size: 26px;
            text-align: center;
            color: purple;
            font-weight: bold;
            line-height: 100px;
            margin-left: 3px;
            margin-right: 3px;

            /* Location */
            float: left;
            display: inline;
        }

        div#container {
            white-space: nowrap;
            width: 100%;
            height: 108px;
            border: 5px ridge cyan;
        }       

    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function(){

            $(".micapa").hover(function (){

                boxList = document.querySelectorAll(".micapa");

                marginIzqAux = $(this).css("margin-left");

                marginIzqLimit = parseInt($("body").css("width"));

                marginIzq = (((parseInt(marginIzqAux) + 100) % marginIzqLimit).toString()) + "px";

                $(".micapa:first-child").animate({
                    marginLeft: marginIzq,
                    marginTop: "0px"
                }, 2500, function() { 

                    i = boxList.length - 1;

                    while(i >= 0) {

                        if (marginIzqLimit < parseInt($(boxList[i]).css("margin-left"))) {
                            $(boxList[i]).css("margin-top", "-100px");
                            i = -1;
                        } else
                            --i;

                    }
                });
            });

        });
    </script>
</head>

<body>
        <div id="container">
            <div class="micapa">1</div>
            <div class="micapa">2</div>
            <div class="micapa">3</div>
            <div class="micapa">4</div>
            <div class="micapa">5</div>
            <div class="micapa">6</div>
            <div class="micapa">7</div>
            <div class="micapa">8</div>
            <div class="micapa">9</div>
            <div class="micapa">10</div>
            <div class="micapa">11</div>
            <div class="micapa">12</div>
        </div>
</body>

</html>

我该如何继续？

由于

Answer 1

试试这个

$(".micapa:first")

而不是

$(".micapa:first-child")

Answer 2

试试这个：

$(".micapa:first")

或者：

$(".micapa").first()

这是因为.micapa实际上不是first-child。

使用JQuery定位div

2 个答案: