两个元素内联块 - 调整大小时没有流量

Question

我正在寻找使用内联块的多列的最佳方法。除了调整浏览器大小之外，一切都很好。第二列将被推入第一列，正如人们期望的那样使用内联块。我明白为什么会发生这种情况，我需要知道的是，如果有办法进行水平滚动而不是推下第二列。我认为溢出：隐藏会起作用，但似乎没有。

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

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

col1和col2是内嵌块，没有设置宽度，当浏览器视图足够宽时，它们并排显示。当用户浏览器的大小调整为较小时，col2将显示在col1下方。我希望它们始终并排，并在需要时进行水平滚动。

Answer 1

将white-space: nowrap添加到包含display: inline-block的元素的父级。

Answer 2

<div style="width:500px">   // <=== try to make fix width
    <div id="col1"></div>
    <div id="col2"></div>
</div>

或尝试

<div style="min-width:500px">   // <=== try to make fix width
    <div id="col1"></div>
    <div id="col2"></div>
</div>

Answer 3

您可以尝试将min-width设置为外部div。所以它仅适用于窗口较小的情况，并且不能修复实际尺寸。