Question

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

enter image description here

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

<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来划分内容而不是行或列吗？

提前谢谢！

Answer 1

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

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

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

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

例如，我希望将左下角的三个单元格作为某种新闻源。然后我在那里使用片段：

segments

Grid with segments

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

语义UI - 用于布局的ui网格最佳方法（行/列与段）

2 个答案: