MaterialiseCSS卡设计 [英] MaterializeCSS Card Design
问题描述
我尝试使用materializecss.com在我的个人网站中调整材料设计,但是框架仅提供用于排除CARD设计顶部的图像的选项。
我想实现如下所示的链接[第2行,第2列/最后一个图像],其中图像坐在左侧的主要内容,想知道是否任何人都可以帮助我这一点,我会真正感谢您的帮助。谢谢!
@vizFlux
是您想要的代码
.card-image {float:left;宽度:40%; height:250px;}。card-image img {height:100%;}。 float:left;}。card-title {padding-left:20px;}
< div class =card> < div class =card-image> < img src =images / sample-1.jpgclass =hoverZoomLink> < / div> < div class =right-content> < span class =card-title>卡片头衔< / span> < div class =card-content> < p>我是一个非常简单的卡片。我善于包含小部分的信息。我很方便,因为我需要少量标记来有效地使用。 < / p> < / div> < div class =card-action> < a href =#>这是一个链接< / a> < / div> < / div>< / div>
看起来像这样:
I am trying to adapt the Material Design in my personal website using materializecss.com, however the framework only provide options to exclude otherwise images on top of the CARD design.
I want to achieve something as shown below in the link [2nd row, 2nd column/ last image] where the image is sitting at left beside the main content, wondering if anyone could help me on this and I would really appreciate your help on this. thanks!
@vizFlux
Here is the code which you want
.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>
the output should look something like this:
这篇关于MaterialiseCSS卡设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!