我正在尝试使用 Materializecss.com 在我的个人网站中调整 Material Design,但是该框架仅提供在 CARD 设计之上排除其他图像的选项。
我想实现如下链接 [第 2 行,第 2 列/最后一张图片] 中所示的目标,其中图像位于主要内容旁边的左侧,想知道是否有人可以帮助我,我非常感谢您对此的帮助。谢谢!
卡片材料设计示例 https://d13yacurqjgara.cloudfront.net/users/44860/screenshots/1897965/material-design-cards.jpg
@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>
输出应如下所示:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)