Equal width + height responsive divs with hover overlay(具有悬停覆盖的等宽 + 高度响应 div)
问题描述
我无法让我的 div 的高度匹配.我需要它们将 div 的高度与最多的内容相匹配——这通常很容易,但我正在使用还包含更多文本的叠加层来做到这一点.我不能用固定的高度或宽度来做,因为我需要布局来响应.单元格基本上需要是 col-md-2,文本换行时高度最高,它更像一个正方形,col-sm-6 会长而窄,col-xs-12 也会长而且狭窄的.
I'm having trouble getting the heights on my divs to match up. I need them to match the heights of the div with the most content - which is normally easy BUT I'm doing this with overlays that also contain more text. I can't do it with fixed heights or widths because I need the layout to be responsive. The cells need to basically be col-md-2 with the tallest height as the text wraps, it would be more like a square, col-sm-6 would be long and narrow, and col-xs-12 would also be long and narrow.
它不必是引导程序,但它需要具有那种效果.另一个问题是我需要尽可能多地内联,因为我将它交付给客户以粘贴到他们的 drupal 站点,而没有太多访问后端的权限,所以请忽略我的总内联代码.
It doesn't HAVE to be bootstrap, but it needs to have that effect. The other kicker is that I need to do as much of this inline as possible, because I'm delivering it to a client to paste into their drupal site without having much access to the backend, so please ignore my gross inline code.
我快搞定了,叠加层起作用了,高度由内容决定,但我无法让高度与最长的高度相匹配.谁能看到我在这里做错了什么??
I've almost got it, the overlays work, and the heights are being determined by the content, but I just can't get the heights to match up to the longest one. Can anyone see what I'm doing wrong here??
推荐答案
对不起,我很忙,这是一个工作示例:
Sorry i was busy, here's a working example:
这篇关于具有悬停覆盖的等宽 + 高度响应 div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!