Html 如何定义将每个条目与页码关联的基本多列索引

以下是我的想法：

    Alan                  12 | Byron               104
    Alfred                54 | Charles              33
    Ann                   28 | Cleopatra             7
    Basil                133 | Corey               199
    Beryl                  9 | Doris                18
    ...                      | 
    

条目（按字母顺序排序）左对齐。每个条目都与一个页码相关联

这可能是一个基本的索引，某种形式的按字母顺序排列的目录，一本书中的图表列表，等等

有没有办法在html中实现这一点而不用使用表

这里是一个试探性的MWE，它不会给出预期的结果

<div style="column-count:2; column-gap:1em; column-rule:1px;">                                                                                                              
<div style="display:block;"><span style="display:inline-block; text-align:left;">This is item1</span><span stule="display:inline-block; text-align:right;">123</span></div> 
<div style="display:block;"><span style="display:inline-block; text-align:left;">This is item2</span><span stule="display:inline-block; text-align:right;">125</span></div> 
<div style="display:block;"><span style="display:inline-block; text-align:left;">This is item3</span><span stule="display:inline-block; text-align:right;">137</span></div> 
</div

据我所知，linux PC上仅有的两个epub读取应用程序失败惨重。calibre suite电子书查看器程序在“页面”的左半部分显示一列，较新的Folite程序显示两列。。。但是在第一列显示了我的长列表的前半部分（测试样本大约有15页），然后在第二列显示了列表的后半部分。换句话说，左列的条目从字母A开始一直到字母“H”，第二列的条目从字母H开始一直到字母Z，第二列的条目从字母H开始一直到字母Z…！因此，如果读者正在寻找“荷马”条目，那么第一列第15页很有可能会停在霍利，他将不得不返回15页，以获得荷马·海曼（例如）的条目

---

我看了一些android epub阅读应用程序，令我高兴的是，android Reasily-epub阅读器正确地呈现了上面的HTML/CSS。该代码显然足够聪明，可以意识到“页面”上没有剩余空间（更确切地说是满屏的），并自动切换以继续在当前页面的第二列中按顺序显示数据。我看过的其他安卓应用程序都是好坏参半的。Gitgen做得很正确（使用我的示例索引数据），但大多数都显示一列（FBReader、AirReader、Readera），而那些尝试多列模式的人不够聪明，无法切换到同一页面上的第二列

您的数据确实是表格形式的，因此表格是最好的选择，IMO.通过使用flex display将左表和右表包装在一个div中，两个表将并排呈现，而不是一个在另一个上。然后每张桌子需要占50%的宽度

body>div{
显示器：flex；
}
正文>分区>表格{
宽度：50%；
}

阿兰12
阿尔弗雷德54
拜伦12
查理54

这是一张桌子。我不熟悉flux，在网上找不到清晰的描述。但我发现这两种解决方案都有一个问题：它们不是以多列模式显示一个列表，而是任意将“Alan->Charles…”列表分成两个长度相等的列表，并排显示。结果（除非我弄错了）是，如果在稍后的阶段，一半列表中的一个增加了。。。例如，100个条目为了平衡这两个列表，必须重新创建整个html代码。否则，我将以-例如，在最后几页的空白栏结束。除了我不理解它之外。。。我更愿意避免使用flexbox的另一个原因是，我不确定它的支持程度，特别是在电子阅读器、平板电脑上有限的html/css实现。。。我无法验证save是否可以在市场上的每个电子阅读器设备和每个电子阅读器应用程序上进行测试。也许我应该提到这是一个epub？对不起。。。当我按Enter键时，它会发布消息，而不是开始新的段落。澄清一下：我有一个带有c的列表。1500对表单[entry1，page#1]等。我需要这对表单按照我的原始帖子显示，entry1左对齐，page#1右对齐。现在，由于entry1+page#1非常短，我需要一些方法来告诉解释html的代码，当当前页面上的空间用完时，它不应该继续在下一页上，而是移动到第二列。看看拜伦在我的原始帖子中跟随贝丽尔时会发生什么。这样做的结果是，应该有某种方法告诉解释html+css的代码，它应该将数据写入第一列，直到达到“页面”的最大长度，然后切换到第二列。。。继续，直到再次达到允许的最大值，然后继续第2页第1列。等，直到到达数据的末尾。显然，由于幕后的html是由相当于卷轴而不是页面的内容组成的，因此必须以某种方式进行伪造。

<div class="ind-00">
<div class="ind-01"></div>
<div class="ind-02">Alan</div>
<div class="ind-03">621</div>
[...]
</div>

.ind-01 {
    column-count:2;
    column-gap:1em;
    column-rule:1px solid #000;
    text-align:center !important;
    }
.ind-01 {
    display:table-row;
    text-align:center !important;
    font-family:"Charis SIL Compact, Bold";
    font-weight:bold;
    font-size:.8em;
    }
.ind-02 {
    display:table-cell;
    font-size:.8em;
    font-family:"Charis SIL Compact, Regular";
    text-align:left !important;
    text-width:40%;
    }
.ind-03 {
    display:table-cell;
    font-size:.8em;
    font-family:"Charis SIL Compact, Regular";
    text-align:right !important;
    text-width:20%;
    }