semantic ui 항목을 html로 세그먼트에 넣는 방법은 무엇입니까?

Question

나는 각 의미 uy item을 segment에 넣고 싶습니다. 의미 ui/html에서이 작업을 수행하는 올바른 방법은 무엇입니까? item을 segment, segment, item 안에 넣어야합니까? 아니요.

항목

항목 코드 :

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

세그먼트 :

세그먼트 코드 :

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

Answer 1

의미 UI Items 및 Segments 함께 (난 그냥이 같은 문제로 실행)에서 작동하도록 설계되지는 나의 해결 방법은 적용 내 스타일에 필요한 CSS를 추가했다 .ui.segment.item 요소 (scss 템플릿에 넣을 수도 있고 색상, 간격 등의 scss 변수를 사용하여 사이트의 사용자 정의 빌드로 컴파일 할 수 있습니다).

그래서 당신은 당신이 두 스타일을 갖고 싶어하는 블록 모두 .item 및 .segment 스타일을 적용 할 수 있습니다 (piled 또는 compact 등의 변동을, 당신은 사용자 지정 스타일도 물론 같은 그 변화를 포함 할 것이다).

세그먼트의 스타일이 상당히 자체적으로 포함되어 있기 때문에이 방법을 사용했으나 항목의 스타일은 매우 광범위하여 정확하게 재현하기가 어려웠습니다. 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>

:

하는 코드 러너에 내장하는 것은 제대로, 그래서 여기에 표시하지 않는 것은 동일한 코드가 제대로 작동와 바이올린입니다 ```