程序员经验分享-hwhale

MaterialiseCSS 中的砌体

2024-04-13

我想知道是否有任何方法可以在类似砖石的显示器中显示 MaterializeCSS 卡片。我想避免像 masonry 这样的插件，或者必须编译 sass，因为这将在 aurelia 应用程序上使用，而外部库的配置等让我非常痛苦。

我遇到过的最接近的事情是这样的：http://codepen.io/mike-north/pen/MwVoYp?editors=1100 http://codepen.io/mike-north/pen/MwVoYp?editors=1100，它通过以下方式实现：

.cards-container {
  column-break-inside: avoid;
  .card {
    display: inline-block;
    overflow: visible;
  }
}

唉，我无法使用 sass 到 css 编译器让它工作。问题是卡片显示已损坏，如这张图片所示 https://i.stack.imgur.com/Kajza.png。我尝试过的其他方法也会导致相同的结果：卡片损坏。任何帮助将不胜感激。


.cards-container {
  column-break-inside: avoid;
}
.cards-container .card {
  display: inline-block;
  overflow: visible;
}

@media only screen and (max-width: 600px) {
  .cards-container {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
@media only screen and (min-width: 601px) {
  .cards-container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 993px) {
  .cards-container {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
.text-center {
  text-align: center;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" />
<div class="container">
  <div class="row">
    <div class="col s12">
      <h2 class='text-center'>Multi-column <a href="http://materializecss.com">MaterializeCSS</a> card flow</h2>
      <h4 class='text-center grey-text lighten-3'>
        By <a href="https://twitter.com/michaellnorth">@MichaelLNorth</a>
      </h4>
    </div>
  </div>
  <div class="row">
    <div class="col s12 cards-container">
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <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>
           <a href="#">This is a link</a>
         </div>
        </div>      
    </div>
  </div>
</div>

看看这个人，他正在工作呀呀呀呀呀......

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Masonry

Materialize

MaterialiseCSS 中的砌体 的相关文章

  • 如何更改 Material UI 版本 5 自动完成中的选项字体大小？

    我想更改下拉项目的字体大小 我尝试了不同的方法来改变字体大小 如下所示 如何更改 Material UI 自动完成字体大小 https stackoverflow com questions 62492939 how do i change

  • 在每个打印页上重复水印？ JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你

  • jQuery animate() 和 CSS calc()

    我尝试设置CSScalc 使用 jQuery 动画 例如 element animate height calc 100 30px 500 我注意到calc 不支持 jQuery 动画 我希望有一种方法可以做到这一点 我不想要类似的方法 替

  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间

  • 使用JQuery检查元素是否有边框？

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo

  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef

  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式

  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后

  • IE bug：具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord

  • 如何修复“没有这样的文件或目录，lstat 'scss/'”？

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权

  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo

  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地

  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b

  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none

  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass

  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ

  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像

  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv

  • 两列表：一列尽可能小，另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr

  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

随机推荐

  • 使用 skimage 从多边形中提取图像片段

    我想获得通过剪切图像内的多边形而产生的子图像 我在 skimage 中有一个图像 在 matplotlib patches 中有一个多边形 怎么做 以下是我尝试过的 我不一定在寻找类似于下面的方法 我正在寻找最干净 最有效的实现 使用此代码

  • 如何卸载所有 Bower 软件包？

    有时 重建整个站点并强制 Bower 重新安装 Bower json 中所有软件包的新版本很有用 但是 似乎没有任何方法可以做到这一点 尝试 1 bower uninstall bower not installed 0 不 这只能在逐个包

  • gson：将 null 视为空字符串

    I use 谷歌 gson http code google com p google gson 将 Java 映射序列化为 JSON 字符串 它提供构建器处理空值 https sites google com site gson gson

  • 是否可以将 cacerts 的所有内容导入到 jssecacerts 文件中？

    使用 keytool 或其他方法 是否有一种简单的方法将 cacerts 的所有内容导入 jssecacerts 文件 基本上 我想定义自己的 jssecacerts 但我希望 jssecacerts 也包含 cacerts 文件的所有可信

  • iOS OneDrive (skydrive) 应用程序每次运行时都会显示权限对话框

    我正在开发一个 iOS 应用程序 让用户可以访问他们的 OneDrive SkyDrive 但我遇到了一个非常烦人的问题 用户第一次将应用程序链接到 OneDrive 时 一切都会按预期进行 他们必须输入用户 ID 和密码 然后他们必须同意

  • 如果 g(n) = sqrt(n)^sqrt(n)，g(n) 的复杂度是否 = O(2^n)？

    If g n sqrt n sqrt n does the complexity of g n O 2n 任何帮助表示赞赏 比较两个指数函数时的一个有用技巧是让它们具有相同的底数 n n 2lg n n 2 n lg n Now you r

  • 在 C++ 中什么时候使用向量，什么时候使用数组？

    我通常不确定什么时候使用其中一种更好 一般来说 它们似乎都做同样的事情 但就其功能而言 向量是否更灵活 什么时候数组比较合适 通常总是更喜欢使用std vector

  • 所需示例：将 arrow() 与 ggplot2 一起使用

    我想创建一个 geom path 它的箭头指向路径中的下一个位置 我可以毫无问题地获取绘图路径 例如 df lt x 1 12 y 20 31 z 1 12 p lt ggplot df aes x x y y p geom point g

  • 如何在apache服务器中部署ember-cli项目

    我有以下问题 我使用 ember cli 创建了一个 ember 应用程序 该应用程序通过 url 在 nodejs 上运行良好http localhost 4200 运行命令时ember serve 我想在 apache httpd 服务

  • 如何最好地“合并”两个对象及其在 Rails 中的关联？

    这是我的情况 我有 2 个人员对象 人员 1 和人员 2 它们是从两个不同的外部数据源创建的 我使用的手动流程已确定 person1 和 person2 实际上指的是同一个人 因此我想要做的是将它们 合并 为一个人 并删除重复项 我对对象本

  • Nginx + phpFPM：PATH_INFO 始终为空

    我在 Debian 上配置了 nginx stable 1 4 4 PHP 使用 FastCGI php fpm 效果很好 location php fastcgi split path info php alias home 1 publ

  • 获取 .NET Web 应用程序中的当前目录

    所以我有一个网络项目 我试图使用c 方法获取网站的根目录Directory GetCurrentDirectory 我不想使用静态路径 因为文件位置将来会发生变化 此方法在我的 imageProcess aspx cs 文件中运行 但我认为

  • 如何在 RichTextBox 中附加 RTF 文本，Win C#

    我在 Win C 中有一个 RichTextBox 我想在 RichTextBox 中附加一些具有粗体效果的新文本 那么我该怎么做呢 I tried string str richTextBox Rtf my logic str rtf1

  • 通过 Oracle 连接

    这是一个示例表数据 Fruit Number Apple 1 Apple 2 Apple 3 Kiwi 6 Kiwi 10 我尝试连接表列值以获得以下内容 Fruit Number Apple 1 2 3 Kiwi 6 10 有没有办法查询

  • SQLException：oracle 中的协议冲突

    我收到 违反协议 的消息 我有一个在 RedHat Linux 上运行的应用程序 数据库和应用程序共同驻留在计算机上 使用的Oracle版本 Oracle 11g R2 11 2 0 3 0 使用的 JDBC 驱动程序 12 1 0 1使用

  • 无符号字符的格式说明符

    说我要打印unsigned char unsigned char x 12 哪个是对的 这 printf d x or this printf u x 事情在其他地方 所以我遇到了这样的讨论 即使 ch 更改为 unsigned char

  • 为什么这里除以零没有触发异常？

    这是一个后续问题为什么这个异常没有打印出来 为什么显示错误 https stackoverflow com questions 12130659 why is this exception is not printed why is it

  • 鉴于 GPU 有任务队列并且是异步的，计算 FPS 的正确方法是什么？

    我始终认为计算 FPS 的正确方法是简单地计算绘制循环迭代所需的时间 互联网上的大部分内容似乎都是一致的 But 现代显卡被视为异步服务器 因此绘制循环会发出 GPU 上已有的顶点 纹理 等数据的绘制指令 这些调用不会阻塞调用线程 直到 G

  • 带分隔符的 Flutter 组列表视图

    我正在寻找一些指导来创建带有分隔符的列表视图 例如 我想从按日期分组的数据库中获取消息 并用一些图形或线条等按日期分隔消息 然后将消息放在分隔符下 在颤振中尝试这一点 任何正确方向的指导或推动将不胜感激 简单地说ListItem into

  • MaterialiseCSS 中的砌体

    我想知道是否有任何方法可以在类似砖石的显示器中显示 MaterializeCSS 卡片 我想避免像 masonry 这样的插件 或者必须编译 sass 因为这将在 aurelia 应用程序上使用 而外部库的配置等让我非常痛苦 我遇到过的最接

热门标签