语义化UI - UI网格最佳布局方案（行/列 vs 段）

Question

语义化UI - UI网格最佳布局方案（行/列 vs 段）

21

我刚开始接触 Semantic 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 来分隔内容而不是行或列吗？

先行致谢！

- Let_IT_roll

2个回答

1

你可以使用 stretched grid 来垂直拉伸段落，这样它们就会具有相同的高度。同时使用 .ui.segments 可以帮助你保持代码整洁。[在线演示]

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>

- Yami Odymel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- garyF · Accepted Answer

Semantic UI 希望 segments 意味着文本/文章的一部分。他们在这里留下了一个小注释:

段落用于创建相关内容的分组。水平段最适合与网格一起使用，以便于沿着网格行对齐的文本组。

实际上，他们的意思是 grid 是您标记的基础。 grid 已经被设计用于布局页面。

您可以在网格中使用 segments 来分组相似的内容。（如果您在文档中查看更多，可以看到他们有针对 segments 的 stacked、piled、loading 类。）

例如，我想将左下角的三个单元格作为某种新闻提要。那么我会在那里使用 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>