Как отображать динамический контент в двух столбцах равномерно?

Question

У меня динамический контент, загружаемый на страницу, поэтому неуказанное количество элементов. Мне нужно, чтобы они были равномерно распределены между двумя столбцами, поэтому я решил установить их ширину до 50%, а их плавающие левые будут делать трюк.

<div class="element"> 
    <p>My content goes here!</p> 
</div> 

.element{float:left;width:50%;} 

Пример: https://jsfiddle.net/fft75mu4/

Но в ситуации, в моем примере есть разрыв выше синего элемента, потому что правый элемент выше, чем первый слева. Какое рекомендуемое решение для этого? Я предполагаю, что это распространенная проблема?

Я бы предпочел не создавать фактические столбцы в CSS, так как контент является динамическим, а элементы могут быть очень высокими/короткими, поэтому положительное слово 5 слева и 5 справа не всегда работает.

Answer 1

В зависимости от поддержки браузера вы хотите, возможно, столбцы CSS являются решением?

http://caniuse.com/#feat=multicolumn

body { 
    column-count: 2; 
} 

.element { 
    break-inside: avoid; 
} 

https://jsfiddle.net/erykpiast/fft75mu4/11/

Answer 2

Вы можете сделать это сделано разными способами, один из них (левая колонка - класс "floatLeft", правый столбец - класс "floatRight"):

.element{width:50%;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} 
 
.floatLeft{ 
 
    float:left; 
 
} 
 
.floatRight{ 
 
    float:right; 
 
} 
 
.blue{background-color:#3aa9e3} 
 
.red{background-color:#f15743;} 
 
.green{background-color:#8aba56;}

<div class="element red floatLeft"> 
 
    <p>My content goes here! My content goes here! My content goes here! My content goes here!</p> 
 
</div> 
 

 
<div class="element green floatRight"> 
 
    <p>My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here!</p> 
 
</div> 
 
<div class="element blue floatLeft"> 
 
    <p>My content goes here! My content goes here! My content goes here! My content goes here!</p> 
 
</div>

Answer 3

Вам нужно используйте javascript. Существует легкая библиотека под названием «масонство» (http://masonry.desandro.com/), которая поможет вам достичь желаемого.

Answer 4

Ked Ответ более чистый, но вы могли бы также вкладывать в DIV-теги. Что-то вроде этого:

.element{width:50%;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} 
 

 
.blue{background-color:#3aa9e3} 
 
.red{background-color:#f15743;} 
 
.green{background-color:#8aba56;} 
 

 
.floatLeft{ 
 
    float:left; 
 
} 
 
.floatRight{ 
 
    float:right; 
 
}

<div class="element floatLeft"> 
 
    <div class="red floatLeft"> 
 
     <p >My content goes here! My content goes here! My content goes here! My content goes here!</p> 
 
    </div> 
 
    <div class="blue floatRight"> 
 
     <p>My content goes here! My content goes here! My content goes here! My content goes here!</p> 
 
    </div> 
 
</div> 
 

 
<div class="element green floatRight"> 
 
    <p>My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here! My content goes here!</p> 
 
</div>