Чистое решение CSS для разделения содержимого внутри одной (!) Обертки на два столбца

Question

У меня есть динамический контент внутри оболочки:

<div class="wrapper">
  // Dynamic content
</div>

И что я хочу, это примерно так:

изображение

По сути, я хочу разделить содержимое с одним делением на два столбца.

Есть ли в любом случае, я могу сделать это с чистым CSS?

Я должен поддерживать все современные браузеры, включая IE-10-11 и край.

Answer 1

Мы можем использовать CSS для этого, есть свойство с именем column-count

Свойство CSS count-count разбивает содержимое элемента на указанное количество столбцов

.wrapper {
  column-count: 2;
}

<p class="wrapper">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi justo, venenatis sit amet iaculis nec, scelerisque eu sapien. Morbi porttitor ornare massa nec venenatis. Aenean a neque metus. Quisque venenatis metus diam, ut interdum magna bibendum ut.
  Aliquam nec orci tincidunt, porttitor orci quis, condimentum ipsum. Morbi sed nunc quam. Aliquam egestas tincidunt diam, quis gravida diam elementum vitae. Morbi venenatis, tortor in efficitur consectetur, lectus metus aliquet arcu, in sagittis lectus
  odio vitae ligula. Quisque luctus dignissim leo vitae commodo. Pellentesque condimentum, lectus eu venenatis ornare, sem tellus consequat diam, id semper urna lectus sed quam. Nulla faucibus sollicitudin lectus a ornare. Donec a venenatis tellus. Proin
  imperdiet fermentum blandit. In sit amet lacinia neque. Phasellus luctus ultrices nulla, eu tempus arcu sodales eu. Pellentesque sit amet lacinia dui, vel gravida est.
</p>

Поддержка на самом деле тоже очень хороша, поддерживает IE 10+ и любой другой крупный браузер.

Answer 2

Использование начальной загрузки:

<div class="row">
  <div class="column"></div>  /// Your dynamic DIV
  <div class="column"></div>  /// your dynamic DIV
</div>

Answer 3

.wrapper{
  column-count: 2;
}

Это должно работать с IE 10 и выше