MaterialiseCSS卡设计

本文介绍了MaterialiseCSS卡设计的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我尝试使用materializecss在我的个人网站中调整材料设计，但是框架仅提供用于排除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, 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!

Card Material Design Example

解决方案

@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: