Wie zeige ich eine zufällig generierte Liste in Spalten mit CSS an?

Question

Versuchen zu bestimmen, wie die folgende zufällig generierte Liste in Spalten angezeigt wird? Der folgende Code generiert eine vertikale Anzeige von Anführungszeichen.

Das Ziel ist es, Anführungszeichen in Zeilen von 4, nicht nur vertikal anzeigen zu können. Wie würde ich das tun?

Aktuelle JS:

var my_res = _.sample([ 
'Quote 1', 
'Quote 2', 
'Quote 3', 
'Quote 4', 
'Quote 5', 
'Quote 6' 
], 5); 

    var arr_len = my_res.length; 
    var targ = document.getElementById('i_need_quotes_within_this'); 
    for(i=0; i<arr_len; i++){ 
     targ.innerHTML += "<q class=\"style\">"+my_res[i]+"</q><br/>" 
    } 

Aktuelle CSS:

.style{ 
    color: rgb 0, 0, 255; 
    background-color: firebrick; 
    font-size: 12px; 
    display: block; 
    border: 1px solid green ; 
    width: 300px; 
    height: 100px; 
} 

Answer 1

Statt Artklasse zu jedem Zitat anzuwenden. Wenden Sie das auf das div an, das all diese enthält.

CSS:

  .style{ 
      color: rgb 0, 0, 255; 
      background-color: firebrick; 
      font-size: 12px; 
      display: block; 
      border: 1px solid green ; 
      width: auto; 
      //height: 100px; 

      -webkit-column-count: 5; /* Chrome, Safari, Opera */ 
      -moz-column-count: 5; /* Firefox */ 
      column-count: 5; 

      -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ 
      -moz-column-gap: 40px; /* Firefox */ 
      column-gap: 40px; 

      -webkit-column-rule: 4px outset green; /* Chrome, Safari, Opera */ 
      -moz-column-rule: 4px outset green; /* Firefox */ 
      column-rule: 4px outset green;    
      } 

HTML:

 <div id="i_need_quotes_within_this" class="style"> 
     quote1<br/> 
     quote2<br/> 
     quote3<br/> 
     quote4<br/> 
     quote5<br/> 
     quote6<br/> 
     quote7<br/> 
     quote8<br/> 
     quote9<br/> 
     quote10<br/> 

    </div>