Question

所以我试图像书一样展示一个巨大的文字。＆＃34;页面＆＃34;有宽度和高度。它们显示在两列（左侧和右侧）上。第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），我想使用一个固定的高度（我实际上使用大量的
只是我的眼睛，看看它是否看起来排成一列）。我想让文字从左边开始＆＃34;页面＆＃34; （左栏）并在达到页面高度限制后自动切换到右页（右栏）。但是，一旦达到右列的高度限制（两列的高度相同），我希望它再次切换回左列。对于所有文本，我希望这可以继续和第四。

让我自动化的最大努力是我不太了解Javascript。我找到了this解决方案，但它没有告诉我如何让文字在右侧一直回到左栏。

我希望我很清楚。如果有任何令人困惑的事情，请随时告诉我。我整个夏天都在研究这个问题，而我似乎无法找到如何做到这一点。提前谢谢！

Answer 1

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

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

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

1 个答案: