Anlamsal ui öğeleri html cinsine nasıl yerleştirilir?

Question

Her semantik ui item'u segment içine koymak istiyorum. Bunu semantik ui/html'de yapmanın doğru yolu nedir? item'un segment, segment içine item içine mi koymalı yoksa ikisi de?

Öğeler

Öğeler kodu:

<div class="ui divided items"> 
    <div class="item"> 
    <div class="image"> 
     <img src="/images/wireframe/image.png"> 
    </div> 
    <div class="content"> 
     <a class="header">12 Years a Slave</a> 
     <div class="meta"> 
     <span class="cinema">Union Square 14</span> 
     </div> 
     <div class="description"> 
     <p></p> 
     </div> 
     <div class="extra"> 
     <div class="ui label">IMAX</div> 
     <div class="ui label"><i class="globe icon"></i> Additional Languages</div> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <div class="image"> 
     <img src="/images/wireframe/image.png"> 
    </div> 
    <div class="content"> 
     <a class="header">My Neighbor Totoro</a> 
     <div class="meta"> 
     <span class="cinema">IFC Cinema</span> 
     </div> 
     <div class="description"> 
     <p></p> 
     </div> 
     <div class="extra"> 
     <div class="ui right floated primary button"> 
      Buy tickets 
      <i class="right chevron icon"></i> 
     </div> 
     <div class="ui label">Limited</div> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <div class="image"> 
     <img src="/images/wireframe/image.png"> 
    </div> 
    <div class="content"> 
     <a class="header">Watchmen</a> 
     <div class="meta"> 
     <span class="cinema">IFC</span> 
     </div> 
     <div class="description"> 
     <p></p> 
     </div> 
     <div class="extra"> 
     <div class="ui right floated primary button"> 
      Buy tickets 
      <i class="right chevron icon"></i> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Segment:

Segment kodu:

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

Answer 1

Semantik UI Items ve Segments birlikte (ben sadece bu aynı konu koştum) çalışmak üzere tasarlanmamıştır yani benim geçici çözüm bir uygulanan benim stil sayfasına gerekli css eklemek oldu .ui.segment.item öğesi (bunu ayrıca scss şablonlarına yerleştirebilir ve bunun yerine siteniz için özel bir semantik-ui derlemesi oluşturmak için renkler, boşluklar vb. Için scss değişkenlerini kullanabilirsiniz).

Öyleyse her iki stilleri var isteyen blokları hem .item ve .segment stilleri uygulayabilirsiniz (piled veya compact gibi herhangi bir varyasyonu için, özel stilleri çok tabii olarak o varyasyonları dahil etmesi gerekir).

Bu şekilde yaptım çünkü bir segmentin stilleri oldukça kendiliğinden içeriyor, ancak bir öğe için olanlar oldukça kapsamlı, bu yüzden doğru şekilde çoğaltmak daha zor olurdu. https://jsfiddle.net/nw8nte4b/

`` `

.ui.segment.item { 
 
    position: relative; 
 
    background: #fff; 
 
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); 
 
    margin: 1rem 0; 
 
    padding: 1em; 
 
    border-radius: 0.25rem; 
 
    border: 1px solid rgba(34, 36, 38, 0.15); 
 
}

<link href="https://oss.maxcdn.com/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" /> 
 

 
<div class="ui centered padded grid"> 
 
    <div class="ten wide column"> 
 

 
    <div class="ui items"> 
 
     <div class="ui item segment"> 
 
     <div class="image"> 
 
      <img src="http://semantic-ui.com/images/wireframe/image.png"> 
 
     </div> 
 
     <div class="content"> 
 
      <a class="header">12 Years a Slave</a> 
 
      <div class="meta"> 
 
      <span class="cinema">Union Square 14</span> 
 
      </div> 
 
      <div class="description"> 
 
      <p></p> 
 
      </div> 
 
      <div class="extra"> 
 
      <div class="ui label">IMAX</div> 
 
      <div class="ui label"><i class="globe icon"></i> Additional Languages</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="ui item segment"> 
 
     <div class="image"> 
 
      <img src="http://semantic-ui.com/images/wireframe/image.png"> 
 
     </div> 
 
     <div class="content"> 
 
      <a class="header">My Neighbor Totoro</a> 
 
      <div class="meta"> 
 
      <span class="cinema">IFC Cinema</span> 
 
      </div> 
 
      <div class="description"> 
 
      <p></p> 
 
      </div> 
 
      <div class="extra"> 
 
      <div class="ui right floated primary button"> 
 
       Buy tickets 
 
       <i class="right chevron icon"></i> 
 
      </div> 
 
      <div class="ui label">Limited</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="ui item segment"> 
 
     <div class="image"> 
 
      <img src="http://semantic-ui.com/images/wireframe/image.png"> 
 
     </div> 
 
     <div class="content"> 
 
      <a class="header">Watchmen</a> 
 
      <div class="meta"> 
 
      <span class="cinema">IFC</span> 
 
      </div> 
 
      <div class="description"> 
 
      <p></p> 
 
      </div> 
 
      <div class="extra"> 
 
      <div class="ui right floated primary button"> 
 
       Buy tickets 
 
       <i class="right chevron icon"></i> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

:

kod koşucu inşa doğru, işte gösterilecek görünmüyor aynı kod düzgün çalışmasını bir keman olduğunu `` `