尝试确定如何在列中显示以下随机生成的列表?下面的代码生成垂直显示的引号。
目标是能够以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;
}
答案 0 :(得分:1)
而不是将样式类应用于每个引用。将其应用于包含所有这些的div。
CSS:
DialogFragment
HTML:
.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;
}