使文本反复从一列流向另一列

Question

所以我试图显示像书一样的大文本。 “页面”具有宽度和高度。 它们显示在两列（左和右）上。 页面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>

CSS仅将两列显示在另一列（#right和#left）之间。 我想您可以看到其背后的逻辑：在每个分页符处，我都将文本放在匹配项中，以使其位于相应的一侧。

CSS代码：

.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;
}

我的问题是我想使此功能自动进行以使用WYSIWYG文本形式（Wordpress），并且我想使用固定的高度（我实际上是在调整整个布局，
和我的眼睛看是否看起来对齐）。 我想使文本从左侧的“页面”（左列）开始，并在达到页面的高度限制后自动切换到右侧的页面（右列）。 但是，当它达到右列的高度限制（两列的高度相同）时，我希望它再次切换回左列。 我希望对所有文本继续进行讨论。

我要使此自动程序最大的挣扎是我真的不了解Javascript。 我找到了这个解决方案，但是它没有告诉我如何使文本在右侧回到左列。

我希望我很清楚。 如果有任何令人困惑的地方，请随时告诉我。 我整个夏天都在从事这项工作，但似乎找不到解决方法。 提前致谢！

Answer 1

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

另一种选择是使用jQuery插件，例如http://welcome.totheinter.net/columnizer-jquery-plugin/