css - 两个元素内联 block - 调整大小时无流动

Question

我正在寻找使用内联 block 来拥有多个列的最佳方式。除了调整浏览器大小时，一切都很好。正如内联 block 所期望的那样，第二列将被推到第一列下方。我明白为什么会这样，我需要知道的是是否有办法进行水平滚动而不是将第二列向下推。我认为 overflow:hidden 会起作用，但它似乎不起作用。

我现在没有设置任何宽度，希望尽可能保持流畅。

<div>
    <div id="col1"></div>
    <div id="col2"></div>
</div>

col1 和 col2 是没有设置宽度的行内 block ，当浏览器 View 足够宽时，它们并排显示。当用户浏览器尺寸变小时，col2 显示在 col1 下方。我希望它们始终并排放置，并在需要时水平滚动。

Answer 1

添加white-space: nowrap到具有 display: inline-block 的元素的父元素。