/ 左側に画像があるセマンティックUIカード - css、semantic-ui、semantic-ui-css

セマンティックUIカード(左画像) - css、semantic-ui、semantic-ui-css

Semantic UI Cardを使うことは可能ですか?左側の画像?ドキュメントは、イメージが常に一番上にある例を示しています。私が入手したいのはSemantic UI Itemのようなものです(もちろんカードを使いたいのですが)。

ここに画像の説明を入力

私が入手したいのはこのようなものです。

ここに画像の説明を入力

ご覧のとおり、画像は左側にあり、それはSemantic UIカードに似たものです。

回答:

回答№1は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="/images/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です。

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