Wie man semantische UI-Elemente in Segmente in HTML einfügt?

Question

Ich würde gerne jede semantische UI item in eine segment setzen. Was ist der richtige Weg, dies in semantischen ui/html zu tun? Sollte ich setzen item innerhalb segment, innerhalb item oder keine?

Artikel

Artikel Code:

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

Segmentcode:

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

Answer 1

Semantic UI Items und Segments nicht zusammen zu arbeiten entworfen (i lief in das gleiche Problem), so war meine Abhilfe die erforderliche CSS zu meinem Sheet eine Anwendung hinzufügen .ui.segment.item Element (Sie könnten dies auch in die scss-Vorlagen einfügen und stattdessen scss-Variablen für Farben, Abstände usw. verwenden, um dies zu einem benutzerdefinierten Build von semantic-ui für Ihre Site zu kompilieren).

So können Sie gelten sowohl .item und .segment Stile dieser Blöcke, die Sie beide Stile haben möchten (für alle Varianten wie piled oder compact, würden Sie diese Variationen als benutzerdefinierte Stile natürlich auch enthalten müssen).

Ich habe es so gemacht, weil die Stile für ein Segment ziemlich eigenständig sind, aber die für ein Element sind ziemlich umfangreich, so dass sie schwerer zu reproduzieren sind.

Die in Code Läufer, scheint nicht richtig angezeigt wird, ist so hier eine Geige mit dem gleichen Code richtig funktioniert: 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>

`` `