水平扩展的动态div

Question

我理解如何使用Javascript来完成这个任务，但现在我主要关注的是如何使用css来完成这个任务。

示例：

CSS

#parent {
   height: 200px;
   overflow-y: hidden;
   overflow-x: auto;
}

Javascript

.child {
    height 200px;
    width: 200px;
}

$("#parent").on("click", function () {
    $(this).append("<div class='child'></div>");
});

HTML

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

这样，假设您的窗口大小仅为600 px。在第四个孩子时，div需要扩大。我希望该内容被隐藏，但您可以水平滚动来查看它。

Answer 1

尤金·夏得到了一半的答案。空白:现在只适用于文本。因此，为了像问题所问的那样在div上工作，您必须将子块设置为内联块；

#parent {
    height: 200px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

.child {
    height 200px;
    width: 200px;
    display: inline-block;
}