在 Semantic-ui 中处理 'segment' 元素内的列

Question

我需要的是把ui-segment into 3 columns and to show the ui- statistic平均分。下面是我实现它的代码，

<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>

但这看起来很糟糕。移动设备看起来也与列不在 ui 段中一样。

我该如何解决这个问题？

提前致谢。

Answer 1

我不确定语义 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>
    ...
    ...

我在这里做了一个示例： http://jsfiddle.net/4a32bbmu/

在 Semantic-ui 中处理 'segment' 元素内的列

working with columns inside 'segment' element in Semantic-ui

javascript

jquery

html

grid

semantic-ui