Javascript 使文本重复地从一列流向另一列

所以我试着像书一样显示一个巨大的文本。“页面”有宽度和高度。它们显示在两列（左侧和右侧）上。第1页在左边，第2页在右边，第3页在左边，第4页在右边，依此类推。在网页的整个高度上，根据需要重复两列

代码基本上如下所示：

<div class="left">
<!-- Page 1 -->
<p>Text here</p>

<!-- Page 3 -->

<br /><p style="text-indent: 0px;"> Text of 3rd page (under page 1) here.</p>

</div>

<div class="right">
<!-- Page 2 -->
<p>Text of page 2 (style: float: right; - the page is displayed beside page 1 with a margin-left of few pixels). </p>

<!-- Page 4 -->
<br />

<p style="text-indent: 0px;">Text of page 4 goes here. Page for is displayed beside page 3. </p>
</div>

我的问题是，为了使用所见即所得文本表单（Wordpress），我想将其自动化，并且我想使用固定高度（实际上，我正在用大量的
调整整个布局，只是用我的眼睛看它是否对齐）。我想让文本从左边的“页面”（左栏）开始，并在达到页面高度限制后自动切换到右边的页面（右栏）。但是，当它达到右列的高度限制（两列的高度相同）时，我希望它再次切换回左列。我想把这个放在后面，所有的文字都放在第四位

我最大的困难是我不太懂Javascript。我找到了解决方案，但它并没有告诉我，一旦文本位于右侧，如何使其返回左列

---

我希望我是清楚的。如果有什么不明白的地方，请随时告诉我。我整个夏天都在做这件事，似乎找不到方法。提前谢谢

您可以使用CSS3 columns属性来完成此操作，尽管它不是最好的跨浏览器解决方案

---

另一种选择是使用jQuery插件，如

，但这并没有告诉我在文本到达右栏后如何返回左栏。我必须用javascript做一个循环吗？你看过我发布的链接上的示例10了吗？这就是你想要做的吗？好吧，我试过了，它确实有效。现在我唯一的问题是，这段代码将列化文本放在前面，因此我不能将页脚放在页面的最后。你知道我怎样才能解决这个问题吗？

.left{


  font-size: 20px;
  float: left;
  margin-left: 20px;
  width: 500px;
  margin-right: 20px;
  text-align: justify;
  /*height: 680px;*/
  margin-bottom: 20px;
}

.right{


  font-size: 20px;
  margin-left: 10px;
  float: right;
  text-align: justify;
  height: 680px;

  width: 500px;

  margin-bottom: 20px;
}