MaterialiseCSS 卡片设计

2024-01-20

我正在尝试使用 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(使用前将#替换为@)

MaterialiseCSS 卡片设计 的相关文章

随机推荐

  • 有没有办法连接 html 属性中的字符串?

    我正在使用 MVC3 并且想使用分部视图来创建动态 DOM 元素 这是我目前的部分观点 model MVCApp ViewModels TitlesViewModel div class display label Name div div
  • 犰狳安装

    您好 我按照 README txt 的说明将 Armadillo3 0 1 安装在我自己的工作目录 home me package armadillo3 0 1 中 但是当我尝试一个例子时 g I home me package armad
  • 在 OSX 上替换 libstdc++.dylib (4.0) 全局新建和删除运算符

    我正在努力用 XCode 3 2 GCC 4 2 libstdc 4 0 动态版本替换全局 new 和删除运算符 我直接从标题 new 中获取原型并实现它们 它们粘贴在下面 该项目是一个 plugin 因此是一个动态库 该插件必须将分配委托
  • 了解 Python 如何“编译”或“解释”函数对象

    我已阅读以下帖子 但我仍然不确定某些事情 Python编译 解释过程 https stackoverflow com questions 3299648 python compilation interpretation process 为
  • 处理 Ember.js 中的验证错误

    我有一个 Rails 应用程序 为 Ember 前端提供 json 服务 我正在尝试在客户端的表单上显示验证错误 Rails 返回这个 json errors hometown is too long maximum is 64 chara
  • 同时将 AuthorizeAttribute 应用于控制器类和操作

    是否有一种方法可以在具有 Authorize 属性的控制器类的一个操作中忽略 Authorize 属性 Authorize public class MyController Controller Authorize Users I tri
  • 根据添加到主屏幕的 URL 在 Web 应用程序清单中设置 start_url

    我的网站有几个小部分 当用户将网站添加到他们的主屏幕时 我想确保主屏幕图标将他们启动到他们添加到主屏幕时所在的小部分 我可以为每个小节注册不同的清单 但这对于没有页面重新加载的单页应用程序不起作用 我正在考虑将小节存储在 cookie 中
  • 使用 C# 编码波斯语字符串

    我正在开发一个短信应用程序 使用C 对于通过 SMS 网关向客户发送交易警报 即 ATM 交易 的银行 该应用程序工作正常 唯一的问题是编码波斯语文本 它没有正确编码波斯语文本 以下是将波斯语文本编码为 UTF 16 格式的方法 publi
  • 如何从 .pb 转换为 .tflite?

    我使用创建了一个对象检测模型Pytorch然后转换自 pth to onnx进而 pb 但现在我需要将其转换为 tflite适用于 Android 应用程序 怎么做 这是我第一次 input arrays 64 3 224 224 outp
  • 编译Linux内核错误xt_CONNMARK.h

    由于非常具体的原因 我尝试编译 Linux 2 6 32 6 内核 并在内核中内置了多个模块 我已将根文件系统包含在 NFS 上 以尝试通过 LAN PXE 启动我自己的自定义救援 Live CD 在包含 ROOT NFS 所需的依赖项和模
  • 是否可以在不编写新文件的情况下将文本合成语音?

    我想使用 GCP 文本到语音 API 合成文本到语音 几乎我能找到的每个示例都会写入一个新文件 我想在该函数输入文本并通过计算机扬声器读取它时执行此操作 我一直在尝试转换 GCP 上传的代码 表示 你好 世界 我还没有找到一种方法可以在转换
  • 将 SelectSingleNode 与 XPath 结合使用会返回 NULL

    我尝试修改 XML 文件SelectSingleNode 文件的结构是
  • Rails 安装错误:“原子”本机 gem 需要安装构建工具[重复]

    这个问题在这里已经有答案了 我正在我的 Windows 上安装 Rails 3 我安装了最新的 ruby 2 0 0 并更新了 gems 但是当我使用 gem install Rails 安装 Rails 时 成功的消息来了 但最后我发现
  • 自定义字体连字

    我正在使用 Visual Studio Code 我看到所有这些很酷的字体连字 用于双等号和三等号 箭头等 我不禁想知道是否有任何方法可以向字体或 VS Code 添加新的自定义连字 我尝试进行一些网络搜索 但似乎找不到任何内容 例如 当我
  • Ansible 内置 Lineinfile 到 ~/.bashrc

    我对 ansible 比较陌生 所以如果这个问题遗漏了一些东西 我很抱歉 我的目标是添加一行 bashrc使用 ansible 文件 我认为最好的方法是ansible builtin lineinfile module 不幸的是 我已经运行
  • AttributeError:无法设置 python 列表属性的属性

    我正在与python docx来自分叉的库version https pypi org project bayoo docx 并且我在编辑元素列表时遇到问题 因为它被定义为属性 docx document Document property
  • 我什么时候应该使用 Rosette 的浅嵌入与深嵌入进行程序综合?

    一些教程Rosette https docs racket lang org rosette guide index html引入程序综合使用浅嵌入 https docs racket lang org rosette guide ch e
  • 无法使用无头模式 Selenium 定位元素

    由于 所有用户在访问我们的网站时必须使用谷歌浏览器 这一限制 我无法使用无头模式定位元素 此限制是由我们的管理员添加的 因此用户只能使用 Google Chrome 我的代码是 Test priority 1 public void set
  • 套接字和管道的 select.select 问题

    我目前正在编写一个使用管道和套接字的基本 python 脚本 管道当前保存来自 html 表单的传入数据 套接字建立与服务器的连接 以不同的时间间隔发送 TCP IP 命令 表单和服务器位于同一 LAN 但不同的计算机上 我的代码如下 us
  • MaterialiseCSS 卡片设计

    我正在尝试使用 Materializecss com 在我的个人网站中调整 Material Design 但是该框架仅提供在 CARD 设计之上排除其他图像的选项 我想实现如下链接 第 2 行 第 2 列 最后一张图片 中所示的目标 其中