Question

尝试制作一个外部div来存放一个库存网格。在下面的jsfiddle中，这是有效的，但是我需要将这个div外部移动到屏幕上的绝对位置。如果取消注释位置：在外部网格上的css中为绝对，则所有内部的div都相互叠加。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-2.1.4.js"></script>
    <script src="Scripts/jquery-ui-1.11.4.js"></script>
    <script>

    </script>

    <style>
        div {
            width: 300px;
            height: 600px;
            background-color: orange;
            left: 100px;
            //position: absolute;
        }

        div div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            float: left;
        }
    </style>
    <title></title>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

如何在保持内部网格的同时将外部网格移动到我想要的任何地方？

Answer 1

问题是内部div也获得position: absolute;样式。尝试将一个类添加到外部div并将其用作定位选择器。

<div class="inventory">
    <div></div>
    ...
</div>

.inventory {
    position: absolute;
    left: 100px;
}

Html游戏库存网格

1 个答案: