如何更改此字符分类器代码中结果的显示方式?

时间:2016-09-08 21:29:35

标签: javascript css

我不知道任何javascript或CSS,但我想知道我找到的这个字符排序器脚本的结果是否可以按照我想要的方式显示。目前,它会垂直列出所有结果,前3个显示其图像。我希望它展示的方式是水平显示前3个,垂直显示其余部分(只是文本)。

目前的示例:

结果1 [显示图像]

结果2 [显示图像]

结果3 [显示图像]

结果4

结果5

结果6

示例我想要它:

结果1 [显示图像] - 结果2 [显示图像] - 结果3 [显示图像] - 结果4(结果5,6等等在结果4之下。)

以下是代码:

str_CenterT = 'Tie!';
str_CenterB = 'Undo last choice';

str_ImgPath = 'http://i.imgur.com/';
var bln_ResultMode = 1;
var int_ResultImg = 2;
var int_ResultRank = 3;


var bln_ResultStyle = 0;


var bln_ProgessBar = 1;


var int_Colspan = 2;
var ary_TitleData = [
   "Male",
   "Female",
];
var ary_CharacterData = [
   [1, "Calem",         [1,0], "kp5zFMC.png"],
   [1, "Leaf",      [0,1], "AYiQoyc.png"],
   [1, "Hilbert",       [1,0], "SAuywcW.png"],
   [1, "DP Lucas",          [1,0], "EfM0nPQ.png"],
   [1, "Nate",          [1,0], "CyTtmPk.png"],
   [1, "FRLG Red",          [1,0], "5hv7HDF.png"],
   ];

修改:我想代码还有更多。

http://static.tumblr.com/8blsvta/AAUmlpa5y/mod_k-factory.js

http://static.tumblr.com/8blsvta/exTmlpa6o/fnc_main_v3.js

1 个答案:

答案 0 :(得分:0)

我真的很想看看你的数据是如何显示的。但是你可以尝试将结果包装在div元素中,然后简单地编写一些CSS。

想象一下你有这个:

<div class="someClass">
     <ul>
        <li> outputting data </li>
     </ul>
</div>

然后在你的css中:

.someClass{
     display:inline-block
}

注意:

您也可以尝试使用

.someClass {
    display: flex
}

这仅适用于现代浏览器。