html - 根据容器动态改变网格宽度

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 中完全删除。