responsive-design - MaterializeCSS 如何使行列高度相同?

原文 标签 responsive-design grid materialize responsive responsiveness

我有一个关于 materializeCSS 的基本网格,我的问题是我的列高度不一样,所以我的布局变得一团糟。我知道这在 bootstrap 上被问过,但在 materializeCSS 中没有一个解决方案对我有用

这是我的 jsfiddle https://jsfiddle.net/zrb46zr2/1/

<div class="row">
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

最佳答案

我实际上找到了一个简单的解决方案,但它需要一个插件和 jquery,而且我不确定这样做的缺点。

但是请随时分享您自己的解决方案我真的想用纯 CSS 解决这个问题

反正代码是这样的

阅读并安装此脚本:https://github.com/liabru/jquery-match-height

HTML

<div class="row">
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Javascript
$(document.ready(function(){
   $('.sample').matchHeight();
});

关于responsive-design - MaterializeCSS 如何使行列高度相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37760307/

相关文章:

html - 菜单图标未出现,链接不起作用

jquery - 如何获得这个特定的响应式导航?

CSS:响应式左侧菜单,右侧列中的内容?

python - 使用网格评估数据

c - 在 C 中使用动态二维数组绘制网格

html - 实现预加载器

jquery - jQuery Masonry和媒体查询-响应式

html - CSS 文本溢出省略号在 Grid/Flex 中不起作用

javascript - 添加具有样式的materializecss芯片-如何获得样式?

javascript - MaterializeCSS 模态标题