语义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适合您正在寻找的内容

with
     input_table ( emp_id, emp_name ) as (
       select '0001', 'Jack Skelly' from dual union all
       select '0002', 'Susan Ryan'  from dual
     )
-- End of simulated input data (not part of the solution).
-- SQL query begins BELOW THIS LINE.
select emp_id, emp_name,
       substr(emp_name, 1, instr(emp_name, ' ') - 1) as first_name,
       substr(emp_name, instr(emp_name, ' ') + 1)    as last_name
from   input_table
;

EMP_ID EMP_NAME    FIRST_NAME  LAST_NAME 
----   ----------- ----------- -----------
0001   Jack Skelly Jack        Skelly     
0002   Susan Ryan  Susan       Ryan       

网格在两个宽的相等列上分开。在右栏上，左栏中有三行，即您的内容。

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>