语义UI段

-1

如何在Semantic 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>

来源

2017-07-06 APJ

请告诉我们你试过了什么，这会给我们一点启动。由于它是，它看起来像你要我们做所有的工作对你来说，和StackOverflow的是不是一个代码编写的服务。 –

@JonP我已经加入我的代码。 – APJ

我认为这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>

电网配合。在右栏中，左栏的三行是您的内容。

来源

2017-07-06 23:16:47 Zooly

谢谢。但是，我想边界也出现。而右边的宽度比左侧部分的宽度稍小。 – APJ

我给你的骨架。我不会给你完整的代码，因为它不是很难做到。你必须自己去尝试。 – Zooly

我想用一些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>

来源

2017-08-09 07:42:48

回答

相关问题