Html 语义用户界面段

如何在语义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>

我认为这符合你的要求

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

---

网格在两个相等的宽柱上分开。右栏有三行，左栏有你的内容。

我认为通过一些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>

---

谢谢但是，我希望边界也显示出来。右半部的宽度比左半部的宽度略小。我给了你骨架。我不会给你完整的代码，因为它并不难做到。你必须自己尝试。请告诉我们你尝试过什么，这将给我们一个起点。事实上，看起来你希望我们为你做所有的工作，而StackOverflow不是一个代码编写服务。@JonP我已经添加了我的代码。