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

为了让它看起来完全像你的图像，你需要自己制作自己的组件/样式。