gpt4 book ai didi

grid - Semantic UI - ui 网格布局的最佳方法(行/列与段)

转载 作者:行者123 更新时间:2023-12-03 12:48:32 25 4
gpt4 key购买 nike

我是 的新手语义 UI 我正在尝试设计一个具有以下布局的网页。查看文档,我决定使用 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划分内容而不是行或列?

先感谢您 !

最佳答案

需要语义 UI segments表示文本/文章的一部分。他们left a small note :

A segment is used to create a grouping of related content. Horizontal segments are most effectively used with grids, to allow for text groups that are aligned across grid rows.



本质上,它们的意思是 grid是您标记的基础。 grid设计用于布局页面。

您可以使用 segments在您的网格中对相似的内容进行分组。 (如果您在文档中查看更多内容,您可以看到他们有 stackedpiledloading 类的 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>

Grid with segments

关于grid - Semantic UI - ui 网格布局的最佳方法(行/列与段),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29581359/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com