html - 列表项 Tpl 问题 : List that has not been rendered with two arrays as two columns

Question

我是 sencha touch 的新手，遇到了以下问题。我必须显示具有可变高度的列表(当然它是默认值)，其中包括文本显示和图像。列表中填充的元素是数组，一个数组需要在左侧，另一个在右侧，一些我如何使用 span 并在元素 TPL 中添加 for 循环以迭代数组。第一个数组(左数组)按预期正确显示，第二个数组显示在右侧，在左数组完成后渲染。我附上了图像现在的样子，所以我需要显示它们并排，可能存在 CSS 问题，尝试了各种替代方案但没有用，任何人都可以通过查看下面的代码和 CSS 知道会出现什么问题，谢谢您的帮助。

ItemTpl:

                     '<div class="listItem">' +
                    '<span><tpl for = "firstArray">'+
                    '<span class="listSecondRow">'+
                    '<img src="resources/images/someImage.png"/>' +
                    '<label>{data} {data}</label>' +
                    '<img src="resources/images/someImage.png"/><label>{data}</label>' +
                    '<img src="resources/images/someImage.png"/><label>SKD {data} </label>' +
                    '<label>{data}</label><br>' +
                    '</span></tpl>'+
                     '<span><tpl for = "secondArray">'+
                     '<span class="listSecondRow2">'+
                     '<img src="resources/images/image.png"/><label>{data} {data}</label>' +
                     '<img src="resources/images/image.png"/><label>{data}</label>' +
                     '<img src="resources/images/image.png"/>' +
                     '<label>SKD {data} </label>' +
                     '<label>{data}</label><br>' +
                     '</span></tpl></span>'+
                    '</div>',

Answer 1

通过修改 CSS 并删除此列的完整元素 Tpl 标签解决了这个问题