HTML 中的 2 列书籍视图

Question

我打算做什么：我从外部源获得了一个 HTML 内容，我需要在我的应用程序中将其显示为 2 列（水平滚动）书籍视图，它将通过 WebView 元素显示。 与 Edge 浏览器渲染 EPUB 书籍的方式类似，单击左/右边缘时，整个屏幕宽度会水平滚动，给人一种翻页的感觉。

到目前为止我所做的：我通过制作一个无限宽的div并将外部 HTML 内容放在另一个div并使用column-width在屏幕上显示两列，隐藏滚动条和onClick事件来实现接近类似的效果左边距或右边距向左或向右滚动屏幕宽度。 这对我来说似乎有点麻烦，因为在滚动 2 列时没有正确居中对齐。

小提琴链接 - https://jsfiddle.net/j2bdtwuf/9/

问题：但是当窗口调整大小时，列被重新调整，然后视图中心不再有 2 列，它完全混乱，视图类似于 - half-column:full-column:half-column . 尝试在示例小提琴链接中稍微滚动一下，然后减小窗口大小，您就会明白我想说什么。

我想要的是，视图中的两列始终保持静态，并且在调整大小时它们的内容会发生变化，但视图中的列位置不会改变。

问题：我目前的解决方案显然看起来很笨拙，有没有更好的方法来实现我上面所说的？ {1}滚动时，列保持居中， {2}在窗口调整大小时，列内容发生变化，但列位置保持居中。

Answer 1

尝试在 css 中使用 min-width 和 min-height 而不是 width 和 height 。 这样，当窗口调整大小时，列会自行调整。 （我没有测试过，但它可以提供帮助）

但是如果你真的想要一个更好的方法，你可以使用引导程序。 只需在您的页面中添加 CDN，就像这里解释的那样。

然后看看这里的网格系统。

Bootstrap 是完全响应式的，它会让你的页面看起来更好。 祝你好运！