Question

我有两个div。两者都是400像素的高度。用户在WYSIWYG编辑器中输入文本。我需要拆分这个HTML文本，方法是首先填充div＃1并填充它（不再包含文本）我需要开始追加到另一个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>。
现代浏览器需要。

Answer 2

如果您想要新闻纸的版式，可以只使用列数css属性

.parent-div{
  column-count:2;
}

<div class="parent-div">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

在两个div之间拆分html？

2 个答案: