javascript - 在两个div之间分割html？

Question

我有两个 div。两者的高度都是 400 px。用户在所见即所得编辑器中输入文本。 我需要以首先填充 div #1 的方式分割此 HTML 文本，当它已满时(不再适合任何文本)，我需要开始附加到另一个 div。

如果它是纯文本，我会将其拆分为换行符，然后逐行复制到 div #1 ，当它已满时，复制到 #div 2 。 但由于它是 HTML，我不知道如何拆分它。

我无法使用 CSS 列，因为每列需要不同的样式。

Answer 1

您正在寻找的是CSS Columns。查看交互示例:

$(function () {
  $("a").click(function () {
    $("#columns").append('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore facere hic enim debitis, aspernatur minima voluptas maxime nemo eos aliquam sint tempora quidem cum ipsum, suscipit neque praesentium culpa repellat.<br /><br />');
    return false;
  });
});

#columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  border: 1px solid #ccc;
  padding: 5px;
  position: relative;
}

#columns:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0%;
  left: 50%;
  background: #ccf;
}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<a href="#">Add Text</a>
<div id="columns"></div>

优点:

• 自适应宽度。
• 无需计算正确的截止位置。

缺点:

• 单例 <div> .
• 需要现代浏览器。