Question

我的网格包含32x32的插槽。 https://www.dropbox.com/s/8pdr8egzghd7wmy/Screenshot%202015-10-25%2023.12.23.png?dl=0

根据其所在元素的大小，如何添加/删除更多网格插槽以填充它？（无法在网格插槽/磁贴的中途切断）

这是我的代码：

<style>
    .drag-item {
        position: absolute;
        background-image: url('assets/images/objects/desk-1.png');
        background-size: 32px;
        width: 32px; height: 32px;
        cursor: move;
    }
    .drop-target {
        position: absolute;
        width: 480px; height: 480px;
        border:dashed 1px orange;
        background: whitesmoke url('assets/images/objects/grid_64.png') repeat;
        background-size: 32px 32px;

    }
</style>
<div class="panel-body" style="width: 520px; height: 520px;">
        <div class="drop-target">
                <div class="drag-item"></div>
                <div class="drag-item"></div>
                <div class="drag-item"></div>
                <div class="drag-item"></div>
                <div class="drag-item"></div>
        </div>
</div>

Answer 1

使用

.drag-item {
    float: left;
}

而不是

.drag-item {
    position: absolute;
}

这将使项目彼此相邻并在当前行中没有足够空间时跳转到下一行。

为确保容器的大小始终为正方形，您需要使用javascript或大量媒体查询。然后，您可以在容器上使用overflow: hidden来隐藏任何溢出的项目行或javascript以完全从DOM中删除它们。

根据容器动态更改网格的宽度

1 个答案: