语义UI卡左侧有图像

Question

使用语义UI卡有可能在左侧有图像吗？该文档显示图像始终位于顶部的示例。我想要得到的东西，如语义UI项目（但我当然希望用卡），像这样：

我想要得到的是这样的：

正如您所看到的，图像位于左侧，与Semantic 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。

为了使它看起来完全像你的形象，你将需要使你自己的组件/风格。