Semantic UI - ui 网格布局的最佳方法（行/列与段）答案

【问题标题】：Semantic UI - ui grid best approach for layout (rows/columns vs segments)Semantic UI - ui 网格布局的最佳方法（行/列与段）
【发布时间】：2015-04-11 18:13:28
【问题描述】：

我是语义用户界面的新手，我正在尝试设计一个具有以下布局的网页。查看文档，我决定使用ui page grid。我还决定在网格之外定义顶部固定菜单。

我的第一个方法是这样的：

<body>
    <div class="ui page grid">
        <div class="three column row">
            <div class="column"> Horizontal section, column 1</div>
            <div class="column"> Horizontal section, column 2</div>
            <div class="column"> Horizontal section, column 3</div>
        </div>
        <div class="two column row">
            <div class="column"> 
                <div class="row"> Left column, row 1</div>
                <div class="row"> Left column, row 2</div>
                <div class="row"> Left column, row 3</div>
            </div>
            <div class="column">
                <div class="row"> Right column, row 1</div>
                <div class="row"> Right column, row 2</div>
            </div>
        </div>
    </div>
</body>

我的问题是：

实现类似于图像的布局是否正确？我应该使用segments 来划分内容而不是行或列吗？

提前谢谢你！

【问题讨论】：

标签： grid semantic-ui

【解决方案1】：

语义 UI 希望 segments 表示部分文本/文章。他们left a small note：

分段用于创建相关内容的分组。水平的段最有效地与网格一起使用，以允许文本跨网格行对齐的组。

本质上，它们意味着grid 是您的标记的基础。 grid 专为布局页面而设计。

您可以在网格中使用segments 对类似内容进行分组。（如果您在文档中查看更多内容，您可以看到他们为segments 设置了stacked、piled、loading 类的意图。）

例如，我想将左下角的三个单元格作为某种新闻提要。然后我会在那里使用分段：

<body>
    <div class="ui page grid">
        <div class="three column row">
            <div class="column"> Horizontal section, column 1</div>
            <div class="column"> Horizontal section, column 2</div>
            <div class="column"> Horizontal section, column 3</div>
        </div>
        <div class="two column row">
            <div class="column"> 
                <div class="ui segment">
                    <div class="ui vertical segment">
                        <p>Left column, row 1</p>
                    </div>
                    <div class="ui vertical segment">
                        <p>Left column, row 2</p>
                    </div>
                    <div class="ui vertical segment">
                        <p>Left column, row 3</p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="row"> Right column, row 1</div>
                <div class="row"> Right column, row 2</div>
            </div>
        </div>
    </div>
</body>

【讨论】：

明白了！这意味着任何不是文本的内容都不应使用segment 进行分组。我最初使用它是因为我需要用水平分隔线分隔左侧单元格，segment 会自动将其添加到不同的内容之间。那么，实现类似目标的最正确方法是在 columns 和 rows 和 ui dividers 之间使用，对吧？
啊！那太冒险了。 :P TLDR：是的。我刚刚看了divider 类文档，他们提到可以使用垂直和水平分隔符来分割内容。（单词重叠，你不觉得吗？;-)）但我认为他们的意思是在这里划分不相关的内容。 :-) 希望这会有所帮助！~ 小注：segments 也可用于文本以外的（相关）事物。比如商店页面上产品的缩略图列表。

【解决方案2】：

您可以使用stretched grid 垂直拉伸线段，使它们具有相同的高度。并使用.ui.segments 可以帮助您保持代码干净。 [Online Demo]

CSS

.segment {
   min-height: 100px;
}

HTML

<div class="ui horizontal segments">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
</div>
<div class="ui stretched two column grid">
    <div class="column">
        <div class="ui vertical segments">
            <div class="segment"></div>
            <div class="segment"></div>
            <div class="segment"></div>
        </div>
    </div>
    <div class="column">
        <div class="ui segment"></div>
        <div class="ui segment"></div>
    </div>
</div>

【讨论】：