Grid 语义UI-UI网格布局的最佳方法（行/列vs段）
我是语义用户界面的新手，我正在尝试设计一个具有以下布局的网页。查看文档，我决定使用Grid 语义UI-UI网格布局的最佳方法（行/列vs段）,grid,semantic-ui,Grid,Semantic Ui,我是语义用户界面的新手，我正在尝试设计一个具有以下布局的网页。查看文档，我决定使用ui页面网格。我还决定在网格之外定义顶部固定菜单 我的第一个方法是这样的： <body> <div class="ui page grid"> <div class="three column row"> <div class="column"> Horizontal section, column 1</div
ui页面网格<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>
水平剖面，第1列
水平剖面，第2列
水平剖面，第3列
左栏，第1行
左栏，第2行
左栏，第3行
右列，第1行
右列，第2行
segments提前谢谢你 语义用户界面希望
段网格分段堆叠堆叠加载段的类
）
例如，我想让左下角的三个单元格作为某种新闻提要。然后我会在那里使用分段：
<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>
水平剖面，第1列
水平剖面，第2列
水平剖面，第3列
左栏，第1行
左栏，第2行
左栏，第3行
右列，第1行
右列，第2行
您可以使用拉伸网格
垂直拉伸线段，使其具有相同的高度。使用.ui.segments
可以帮助您保持代码整洁
CSS
HTML
明白了！这意味着任何非文本的内容都不应使用段进行分组。我最初使用它是因为我需要用水平分隔符分割左侧单元格，然后segment
自动将其添加到不同内容之间。那么，实现这一点的最正确方法就是使用列
和行
和ui分隔符
，对吧？啊！那太危险了TLDR：是的。我刚刚看了一下分隔符
类文档，其中提到可以使用垂直和水平分隔符分割内容。（单词重叠，你不这么认为吗？；-）但我认为它们的意思是在这里划分不相关的内容。：-）希望这有帮助！~小提示：段
也可用于文本以外的（相关）内容。就像商店页面上产品的缩略图列表。
.segment {
min-height: 100px;
}
<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>