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像素。在第4个孩子，div需要扩展。我希望隐藏该内容，但您可以水平滚动查看它。

Answer 1

Eugene Xa有一半的答案。 white-space：nowrap仅适用于文本。因此，为了使问题在div上工作，您必须将子项设置为内联块;

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

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

动态div水平扩展

1 个答案: