左侧带有图像的语义 UI 卡

Question

是否可以使用 Semantic UI Card 将图像放在左侧？该文档显示了图像始终位于顶部的示例。我想要获得的是类似于语义 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。

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