在兩個 div 之間拆分 html？

Question

我有兩個 div。 兩者都是 400 px 高度。 用戶在所見即所得編輯器中輸入文本。 我需要以首先填充 div #1 的方式拆分此 HTML 文本，當它已滿（沒有更多文本適合）時，我需要開始附加到另一個 div。

它是純文本，我會在換行符上拆分它，然后逐行復制到div #1 ，當它已滿時，復制到#div 2 。 但由於它是 HTML，我不知道如何拆分它。

我不能使用 CSS 列，因為我需要為每一列設置不同的樣式。

Answer 1

您正在尋找的是 CSS 列。 檢查交互式示例：

 $(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> 。
• 需要現代瀏覽器。

Answer 2

如果你想要新聞紙的布局，你可以簡單地使用 column-count css property

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