随后的 <pre> 块换行到下一行

Question

我正在尝试显示应如下所示的布局 -

我的HTML是这样的-

<div>
    <pre>
        001
        002
        003
    </pre>
    <pre>
        Flight A from X to Y
        Flight B from Y to Z
        Flight C from Z to W
    </pre>
    <pre>
        A : 21:00    D : 21:15
        A : 21:15    D : 21:30
        A : 21:30    D : 21:45
    </pre>
</div>

我的CSS长得像

div {
    overflow: scroll;
    white-space: nowrap;
}
div pre {
    overflow: visible;
    float: left;
    width: auto;
}

一切正常，我得到了我想要的视图。

但是当屏幕分辨率低或 window 被调整到非常小的尺寸时，布局会变成这样 -

我不希望整个 pre 块垂直向下。我希望水平布局保持原样，包含的 div 应该激活其水平滚动行为。

我尝试过的事情：

根据其他相关答案，我尝试将 pre 块的 CSS 属性更改为 display:inline; 但这并没有改变任何东西。

我尝试将 pre 块包装到它们自己的容器 pre 块中（这样它们就不会包裹起来），例如：

<div>
    <pre>
        <pre></pre>
        <pre></pre>
        <pre></pre>
    </pre>
</div>

但这也无济于事。

Answer 1

试试这个

div {
    overflow: scroll;
    white-space: nowrap;
}
div pre {
    overflow: visible;
    float: left;
    width: auto;
}
@media screen and (max-width: 768px) {
  
    div {
    display: flex;
}
  
}

<div>
    <pre>
        001
        002
        003
    </pre>
    <pre>
        Flight A from X to Y
        Flight B from Y to Z
        Flight C from Z to W
    </pre>
    <pre>
        A : 21:00    D : 21:15
        A : 21:15    D : 21:30
        A : 21:30    D : 21:45
    </pre>
</div>

随后的 <pre> 块换行到下一行

Consequent <pre> blocks get wrapped to next line

html

css

pre