MaterialiseCSS卡设计

Question

我正在尝试使用materializecss.com在我的个人网站中调整Material Design,但是框架仅提供了在CARD设计之上排除其他图像的选项.

我希望在链接[第2行,第2列/最后图像]中显示如下所示的内容,其中图像位于主要内容旁边的左侧,想知道是否有人可以帮助我,我真的很感谢您对此的帮助.谢谢!

卡片材料设计实例

Answer 1

@vizFlux

这是你想要的代码

.card-image {
  float: left;
  width: 40%;
  height: 250px;
}
.card-image img {
  height: 100%;
}
.right-content {
  width: 60%;
  float: left;
}
.card-title {
  padding-left: 20px;
}

<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg" class="hoverZoomLink">
  </div>
  <div class="right-content">
    <span class="card-title">Card Title</span>
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
      </p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
  </div>
</div>

输出应如下所示：