セマンティック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です。

あなたのイメージとまったく同じに見えるようにするには、独自のコンポーネント/スタイルを自分自身で作成する必要があります。