Разделить html между двумя divs?

Question

У меня есть два div. Обе высоты 400 px. Пользователь вводит текст в редакторе WYSIWYG. Мне нужно разбить этот текст HTML таким образом, что div # 1 заполняется первым, а когда он заполнен (текст больше не подходит) Мне нужно начать добавление к другому 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>

Преимущества:

• Отзывчивый ширины.
• Не нужно рассчитывать правильное положение отсечки.

Недостатки:

• Single <div>.
• Современные браузеры необходимы.