javascript - How do I display a randomly generated list in columns with CSS? -


trying determine how display following randomly generated list in columns? code below generates vertical display of quotes.

the goal able display quotes in rows of 4, not vertically. how this?

current 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/>"     } 

current css:

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

instead of applying style class each quote. apply div containing of those.

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> 

Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -