如何使用CSS在列中显示随机生成的列表

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

本文关键字：随机 列表 显示 何使用 CSS      更新时间：2023-09-26

试图确定如何在列中显示以下随机生成的列表？下面的代码生成一个引号的垂直显示。

目标是能够在4行中显示引号，而不仅仅是垂直显示。我该怎么做？

当前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/>"
    }

当前CSS：

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

而不是将样式类应用于每个引号。将其应用于包含所有这些的div。

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>
相关文章：