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
Post a Comment