Question

我知道有很多类似的问题被提出，但似乎没有人真正回答我的问题。基本上我有一个容器div我在其中插入（通过JQuery）新的div通过draggable / droppable作为新的div填充容器，他们开始跳转到一个新的行。我需要它们保持在同一条线上并使容器水平滚动。

这是我的HTML

的一部分

<label for="builder">Builder Area:</label>
<div id="builder">
    <div class="layer" data-layer='0'></div>
</div>

插入图层的“块”：

<div class='chunk' id='"+chunk_id+"'>Chunk:"+chunk_id+"</div>"

插入“块”的代码：

$(".layer").droppable({
    accept: "#chunk_drag",
    activeClass: "ui-active",
    hoverClass: "ui-hover",
    drop: function(event, ui) {

        // Create a new Chunk
        var chunk = "<div class='chunk' id='"+chunk_id+"'>Chunk:"+chunk_id+"</div>";
        chunk_id++;

        // Add the Chunk into the layer
        $(this).append(chunk);

        return true;
    },
});

CSS：

.layer {
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #222222;
    background-color: #EFEFEF;
    min-height: 50px;
    padding: 5px;
    margin: 5px;
    overflow-x: scroll;
}

.chunk {
    border: 1px solid black;
    box-shadow: 2px 2px 10px #222222;
    border-radius: 5px;
    background-color: #FAFAFA;
    padding: 5px;
    margin : 5px;
    overflow: auto;
    max-width: 400px;
    max-height: 200px;
    display: inline-block;
}

Answer 1

这不像CSS那样关于jQuery。向white-space: nowrap;规则添加.layer属性，以便浏览器知道在一行上布置.layer的内联内容，而不是默认的换行行为。（的 DEMO ）

.layer { ... white-space: nowrap; }

强制div被JQuery插入到容器中以保持在同一行

1 个答案: