语义 UI 段

Question

如何在语义中对这个段进行编码UI？我也尝试过使用网格，但不幸的是没有成功。

<div class="ui horizontal segments">

            <div class="ui segment">
                <div class="two column row">
                    <div class="column">

                    </div>
                    <div class="column">

                    </div>
                </div>
            </div>
            <div class="ui segment">

            </div>
</div>

Answer 1

我认为这个 Plunkr 符合您的要求

<div class="ui grid">
    <!-- left part --> 
    <div class="eight wide column">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <!-- right part -->
    <div class="eight wide column"></div>
</div>

网格分隔在两列宽度相等的列上。在右栏，三行，在左栏，您的内容。

Answer 2

我认为通过一些 css 和语义段，您可以实现这一点。这是我试过的。抱歉缩进！

<div class="ui segments" style="width: 400px;float: left;">

<div class="ui compact horizontal segments">
<div class="ui segment" style="width: 100px;padding: 0;border-radius: 0px;">
    <div class="ui segments" style="width: 200px;float: left;border: 0px;border-radius: 0px;border-right: 1px solid #eee;">
<div class="ui segment" style="border-bottom: 1px solid #eee !important;">
  <p>Nested Top</p>
</div>
<div class="ui segment" style="border-bottom: 1px solid #eee!important; ">
  <p>Nested Middle</p>
</div>
<div class="ui segment">
  <p>Nested Bottom</p>
</div>
</div>
</div><div class="ui segment" style="width: 99px;background: #fff;"><p>Nested Horizontal</p> </div></div></div>

语义 UI 段

Semantic UI Segments

html

css

semantic-ui