javascript - 使文本重复地从一列流到另一列

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

我的问题是我想使它自动运行以使用所见即所得的文本形式 (Wordpress)，并且我想使用固定的高度(我实际上正在调整整个布局，其中包含很多
和只是我的眼睛看它是否看起来排成一行)。我想让文本从左边的“页面”(左栏)开始，一旦达到页面的高度限制就自动切换到右页(右栏)。但是我希望它在达到右列的高度限制(两列的高度相同)后再次切换回左列。对于所有文本，我希望它在后面和第四处继续。

我最大的困难在于我并不真正了解 Javascript。我找到了 this解决方案，但它没有告诉我如何让文本在位于右侧后返回到左侧列。

希望我说的很清楚。如果有任何令人困惑的地方，请随时告诉我。我整个夏天都在做这件事，但我似乎找不到怎么做。提前致谢!

Answer 1

虽然这不是最好的跨浏览器解决方案，但您可以使用 CSS3 列属性来完成此操作。

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