css - 左侧带有图像的语义 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。

要使其看起来与您的图像完全一样，您需要自己制作自己的组件/样式。