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

回答

相關問題