Semantic UI Card з зображенням зліва - css, semantic-ui, semantic-ui-css

Чи можливо за допомогою Semantic UI Card мати свійзображення зліва? Документація показує приклад, коли зображення завжди знаходиться вгорі. Що я хочу отримати, це щось на кшталт елемента Semantic UI (але, звичайно, я хочу використовувати картки), наприклад:

Що я хочу отримати, це щось подібне:

Як ви бачите, зображення знаходиться ліворуч, і це щось схоже на карту Semantic UI.

Відповіді:

Найкраще, що ви можете зробити з семантичними компонентами, це:

<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, який використовується.

Для того, щоб він виглядав так, як ваш образ, вам потрібно буде скласти свій власний компонент / стиль.