시맨틱 UI 카드 (왼쪽 이미지)

Question

시맨틱 UI 카드를 사용할 수 있습니까? 왼쪽 이미지가 있습니까? 설명서에는 이미지가 항상 상단에있는 예제가 나와 있습니다.

:

내가 뭘 얻으려는 것은이 같은 것입니다 : 내가 뭘 얻으려는 것은이 같은 시맨틱 UI 항목과 같은 (그러나 물론 내가 카드를 사용하려는 경우)이며,

이미지에서 볼 수 있듯이 이미지는 왼쪽에 있으며 시맨틱 UI 카드와 유사합니다.

Answer 1

당신이 의미 구성 요소와 함께 할 수있는 최선이 될 것입니다 :

<div class="ui card" style="max-width: 100%; min-width: 100%;"> 
    <div class="content" style="padding: 0;"> 
     <div class="ui items"> 
      <div class="item"> 
       <div class="ui medium image"> 
        <img src="https://semantic-ui.com/images/wireframe/image.png"> 
       </div> 
       <div class="content" style="padding: 1rem;"> 
        <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> 
    </div> 
    <div class="extra content"> 
     <a> 
      More Info 
     </a> 
    </div> 
</div> 

나는 내용에 padding 변경하지만 사용하는 유일한 사용자 정의 CSS입니다.

이미지와 똑같이 보이게하려면 자신 만의 구성 요소를 만들거나 자신의 스타일을 지정해야합니다.