WEB小说阅读左右翻页

我一看到需要这个效果就蛋疼了， 后台返回一大段html字段，劳资要怎么把他们划分一页一页展示出来，所有的手机屏幕大小都不一样，汉字，英文占据的位置也不一样，然后还有标题特么要比较大。

直接计算太蠢了，有没有简单的例子，，，没有的话我

大概这样。

用分栏试试， 好蛋疼啊， 分栏的话，无法确定列数

.box{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.inner{
  column-count: n
}

column-count无法确定

仔细看mdn发现column-count是这样定义的

Is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

自动计算？

那设置1，把height限制住，会不会自动分后面的列，然后box剪切，再利用transform移动位置， ok， 可以！

css代码

.box{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.inner{
  height: 100%;
  column-count: 1;
}

好，睡午觉、

--END--