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 卡片设计 的相关文章

  • powershell Invoke-WebRequest WebSession 不起作用

    我无法让以下代码工作 它似乎已登录 但随后返回带有 response 的登录页面 我猜这与回发有关 有办法解决这个问题吗 谢谢 login Invoke WebRequest Uri http www sqlpass org UserLog
  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但
  • 应用程序图标不显示在操作栏上

    我按照构建新 Android 项目的说明进行操作 除了操作栏出现问题外 我得到了一个可运行的项目 问题是应用程序图标未显示在操作栏上的应用程序标题旁边 我使用以下配置创建了项目 最低要求 SDK API 8 Android 2 2 Froy
  • 使用deployJava.runApplet来定位特定元素

    经过多年成功维护一个使用旧有的小程序 嵌入Java小程序的方法 我们无法捂住耳朵唱 啦啦啦 不再了 是时候使用 deployJava runApplet 当我使用点击处理程序触发此方法时 此处通过 jQuery 在按钮上使用事件侦听器 但这
  • 使用 CSS 自定义字体?

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 为什么需要重置浏览器?

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 防止用户在下拉菜单中选择默认值

    我试图阻止用户选择默认的下拉菜单选项 有没有办法在下拉菜单选项中添加文本而不是值 我的代码
  • 如何在React中的Material-UI选择框中设置默认值?

    我在用选择框 https material ui com demos selects 来自材料用户界面 我想显示默认选择的 选择值 选项 但之后用户无法选择此选项
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只

随机推荐

  • 有没有办法连接 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 列 最后一张图片 中所示的目标 其中