Javascript 在'内使用列;段';语义用户界面中的元素

Javascript 在'内使用列;段';语义用户界面中的元素,javascript,jquery,html,grid,semantic-ui,Javascript,Jquery,Html,Grid,Semantic Ui,我需要的是将数据分成3列,并显示等分的s。下面是我实现这一目标的代码 <div class="ui container"> <div class="ui segment"> <h3 class="ui header">World</h3> <div class="ui grid stackable"> <div class="three column row">

我需要的是将数据分成3列,并显示等分的s。下面是我实现这一目标的代码

<div class="ui container">
    <div class="ui segment">
        <h3 class="ui header">World</h3>
        <div class="ui grid stackable">
            <div class="three column row">
                <div class="column">
                    <div class=" ui statistic red statistic">
                        <div class="value">
                            16%
                        </div>
                        <div class="label">
                            A
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class=" ui statistic yellow statistic">
                        <div class="value">
                            53%
                        </div>
                        <div class="label">
                            B
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class=" ui statistic green statistic">
                        <div class="value">
                            31%
                        </div>
                        <div class="label">
                            C
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

世界
16%
A.
53%
B
31%
C
但这看起来很糟糕。移动设备的外观也与ui段之外的列相同。

我怎样才能解决这个问题


提前感谢。

我不确定语义UI的可堆叠网格和统计数据之间的交互

这可能是一个选项,但您可以尝试ui统计分组

<div class="ui three statistics">
    <div class=" ui statistic red statistic">
        <div class="value">16%</div>
        <div class="label">A</div>
    </div>
    <div class=" ui statistic yellow statistic">
        <div class="value">53%</div>
        <div class="label">B</div>
    </div>
    ...
    ...

16%
A.
53%
B
...
...
我在这里做了一个样本:

太棒了。这很有效。如何将“ui统计”集中在每个分区中。现在它被正确地划分为3。但是“ui统计数据”在每个划分中都是左对齐的:)我用正确的语义ui资源更新了JSFIDLE。我不知道你所说的在每个分区中左对齐是什么意思,使用更新的JSFIDLE会更好吗?太棒了。这很有效。我已经添加了“class=”ui statistics red statistic“而不是class=”ui statistics red statistics“。现在工作正常。在原始问题中编辑以备将来使用。