语义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。

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